/* hcts-twenty — hcts-ds applied to the Twenty CRM (v2.53.1) of Here Comes The Sun; see twenty/README.md.
   Twenty 2.x draws everything from --t-* variables declared on .light and .dark (hex, then display-p3 under @supports).
   This sheet redefines the semantic ones with the hcts-ds tokens: slate text, paper behind white cards, slate actions,
   Manrope. `.light.light` / `.dark.dark` outrank both of Twenty's blocks whatever the load order.
   Values are literals (Twenty does not load hcts-ds.css): test_twenty.py checks them against the tokens
   and the names against twenty-v2.53.1-vars.txt. Tag colours (select options) stay Twenty's.
   The @import must stay first. */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* Behind the app while it loads (index.html paints html/body with these) */
:root { --theme-light-background-secondary: #f7f6f0; --theme-dark-background-secondary: #1a3034; }

.light.light {
  --t-font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-border-radius-md: 6px;

  /* Surfaces: --paper behind, --card in front, --chip / --rule for hover and pressed */
  --t-background-primary: #ffffff;
  --t-background-secondary: #f7f6f0;
  --t-background-tertiary: #eff2f3;
  --t-background-quaternary: #e9eeec;
  --t-background-inverted-primary: #376169;
  --t-background-inverted-secondary: #4f6f75;
  --t-background-primary-inverted: #376169;
  --t-background-primary-inverted-hover: #4f6f75;
  --t-background-danger: #f8e0d6;
  --t-background-transparent-strong: rgb(55 97 105 / .16);
  --t-background-transparent-medium: rgb(55 97 105 / .08);
  --t-background-transparent-light: rgb(55 97 105 / .045);
  --t-background-transparent-lighter: rgb(55 97 105 / .025);
  --t-background-overlay-primary: rgb(22 41 45 / .72);
  --t-background-overlay-secondary: rgb(22 41 45 / .36);
  --t-background-overlay-tertiary: rgb(22 41 45 / .07);

  /* Rules */
  --t-border-color-strong: #d7e0de;
  --t-border-color-medium: #e9eeec;
  --t-border-color-light: #eff2f3;
  --t-border-color-inverted: #376169;
  --t-border-color-secondary-inverted: #4f6f75;
  --t-border-color-danger: #f0c9b8;
  --t-border-color-blue: #abbdc0;
  --t-border-color-transparent-strong: rgb(55 97 105 / .07);

  /* Text: --ink, --muted, then lighter slates (tertiary 3.5:1 on white, Twenty's own is 2.8:1) */
  --t-font-color-primary: #376169;
  --t-font-color-secondary: #4f6f75;
  --t-font-color-tertiary: #6a8f95;
  --t-font-color-light: #8aa5aa;
  --t-font-color-extra-light: #a9c0c4;
  --t-font-color-inverted: #ffffff;
  --t-font-color-on-accent: #ffffff;
  --t-font-color-danger: #a3361a;

  /* Accent = --sea (slate), white on it 6.8:1. Twenty's primary buttons and links read --t-color-blue */
  --t-color-blue: #376169;
  --t-color-blue1: #fcfdfd; --t-color-blue2: #f7f9f9; --t-color-blue3: #eff2f3; --t-color-blue4: #e3e9ea;
  --t-color-blue5: #d5dee0; --t-color-blue6: #c3d0d2; --t-color-blue7: #abbdc0; --t-color-blue8: #87a0a5;
  --t-color-blue9: #376169; --t-color-blue10: #2f535a; --t-color-blue11: #2c4e54; --t-color-blue12: #1c3034;
  --t-accent-accent1: #fcfdfd; --t-accent-accent2: #f7f9f9; --t-accent-accent3: #eff2f3; --t-accent-accent4: #e3e9ea;
  --t-accent-accent5: #d5dee0; --t-accent-accent6: #c3d0d2; --t-accent-accent7: #abbdc0; --t-accent-accent8: #87a0a5;
  --t-accent-accent9: #376169; --t-accent-accent10: #2f535a; --t-accent-accent11: #2c4e54; --t-accent-accent12: #1c3034;
  --t-accent-accent3570: #87a0a5; --t-accent-accent4060: #87a0a5;
  --t-accent-primary: #d5dee0; --t-accent-secondary: #d5dee0; --t-accent-tertiary: #eff2f3; --t-accent-quaternary: #f7f9f9;
  --t-background-transparent-blue: rgb(55 97 105 / .1);

  /* Neutral ramp, slate-tinted, so the few components reading it directly match */
  --t-gray-scale-gray1: #ffffff; --t-gray-scale-gray2: #fbfaf6; --t-gray-scale-gray3: #f7f6f0; --t-gray-scale-gray4: #eff2f3;
  --t-gray-scale-gray5: #e9eeec; --t-gray-scale-gray6: #d7e0de; --t-gray-scale-gray7: #c3d0d2; --t-gray-scale-gray8: #a9c0c4;
  --t-gray-scale-gray9: #8aa5aa; --t-gray-scale-gray10: #6a8f95; --t-gray-scale-gray11: #4f6f75; --t-gray-scale-gray12: #376169;

  /* Feedback: hcts-ds states */
  --t-snack-bar-success-color: #2c7a4b; --t-snack-bar-success-background-color: #dff0e5;
  --t-snack-bar-error-color: #a3361a; --t-snack-bar-error-background-color: #f8e0d6;
  --t-snack-bar-warning-color: #6b5c42; --t-snack-bar-warning-background-color: #efe6d4;
  --t-snack-bar-info-color: #376169; --t-snack-bar-info-background-color: #e3ecec;
  --t-snack-bar-default-color: #376169; --t-snack-bar-default-background-color: rgb(55 97 105 / .045);
  --t-tooltip-background: rgb(22 41 45 / .92);
  --t-box-shadow-color: rgb(22 41 45 / .05);
}

.dark.dark {
  --t-font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --t-border-radius-md: 6px;

  /* Surfaces: dark --paper in front (Twenty's dark front is its darkest surface), --card and --chip behind */
  --t-background-primary: #16292d;
  --t-background-secondary: #1a3034;
  --t-background-tertiary: #1f363b;
  --t-background-quaternary: #253f44;
  --t-background-inverted-primary: #e9eeec;
  --t-background-inverted-secondary: #9fbcc2;
  --t-background-primary-inverted: #e9eeec;
  --t-background-primary-inverted-hover: #9fbcc2;
  --t-background-danger: #3a1d14;
  --t-background-transparent-strong: rgb(233 238 236 / .14);
  --t-background-transparent-medium: rgb(233 238 236 / .1);
  --t-background-transparent-light: rgb(233 238 236 / .06);
  --t-background-transparent-lighter: rgb(233 238 236 / .03);
  --t-background-overlay-primary: rgb(8 18 20 / .72);
  --t-background-overlay-secondary: rgb(8 18 20 / .36);
  --t-background-overlay-tertiary: rgb(8 18 20 / .36);

  /* Rules */
  --t-border-color-strong: #3c5a60;
  --t-border-color-medium: #2f4a4f;
  --t-border-color-light: #253f44;
  --t-border-color-inverted: #e9eeec;
  --t-border-color-secondary-inverted: #9fbcc2;
  --t-border-color-danger: #5a2c1f;
  --t-border-color-blue: #335e66;
  --t-border-color-transparent-strong: rgb(233 238 236 / .07);

  /* Text: dark --ink, --muted, then dimmer slates */
  --t-font-color-primary: #e9eeec;
  --t-font-color-secondary: #c4d4d6;
  --t-font-color-tertiary: #9fbcc2;
  --t-font-color-light: #7d9a9f;
  --t-font-color-extra-light: #5d7a7f;
  --t-font-color-inverted: #16292d;
  --t-font-color-on-accent: #ffffff;
  --t-font-color-danger: #f19173;

  /* Accent: a mid slate that carries white (4.5:1, Twenty's buttons hard-code white text);
     the text step (11) is dark --sea */
  --t-color-blue: #457f89;
  --t-color-blue1: #16292d; --t-color-blue2: #1a3034; --t-color-blue3: #1e373c; --t-color-blue4: #223f45;
  --t-color-blue5: #27484e; --t-color-blue6: #2d5259; --t-color-blue7: #335e66; --t-color-blue8: #3c6e77;
  --t-color-blue9: #457f89; --t-color-blue10: #5a929c; --t-color-blue11: #a9cdd4; --t-color-blue12: #d9ebee;
  --t-accent-accent1: #16292d; --t-accent-accent2: #1a3034; --t-accent-accent3: #1e373c; --t-accent-accent4: #223f45;
  --t-accent-accent5: #27484e; --t-accent-accent6: #2d5259; --t-accent-accent7: #335e66; --t-accent-accent8: #3c6e77;
  --t-accent-accent9: #457f89; --t-accent-accent10: #5a929c; --t-accent-accent11: #a9cdd4; --t-accent-accent12: #d9ebee;
  --t-accent-accent3570: #3c6e77; --t-accent-accent4060: #3c6e77;
  --t-accent-primary: #27484e; --t-accent-secondary: #27484e; --t-accent-tertiary: #1e373c; --t-accent-quaternary: #1a3034;
  --t-background-transparent-blue: rgb(169 205 212 / .22);
  --t-buttons-secondary-text-color: #a9cdd4;

  /* Neutral ramp */
  --t-gray-scale-gray1: #16292d; --t-gray-scale-gray2: #1a3034; --t-gray-scale-gray3: #1c3337; --t-gray-scale-gray4: #1f363b;
  --t-gray-scale-gray5: #253f44; --t-gray-scale-gray6: #3c5a60; --t-gray-scale-gray7: #4a676d; --t-gray-scale-gray8: #5d7a7f;
  --t-gray-scale-gray9: #7d9a9f; --t-gray-scale-gray10: #8eabb0; --t-gray-scale-gray11: #c4d4d6; --t-gray-scale-gray12: #e9eeec;

  /* Feedback */
  --t-snack-bar-success-color: #7cc79a; --t-snack-bar-success-background-color: #173023;
  --t-snack-bar-error-color: #f19173; --t-snack-bar-error-background-color: #3a1d14;
  --t-snack-bar-warning-color: #c9b994; --t-snack-bar-warning-background-color: #2c2719;
  --t-snack-bar-info-color: #a9cdd4; --t-snack-bar-info-background-color: #22434a;
  --t-snack-bar-default-color: #e9eeec; --t-snack-bar-default-background-color: rgb(233 238 236 / .06);
  --t-tooltip-background: rgb(8 18 20 / .92);
}

/* Twenty 2.53 hard-codes body { font-family: Inter }: point it at the variable, which everything else inherits */
:is(.light.light, .dark.dark) body { font-family: var(--t-font-family); }

/* Links Twenty leaves to the browser's blue (markdown in dashboard widgets and notes): the slate text step */
:where(.light.light, .dark.dark) a:not([class]) { color: var(--t-color-blue11); }

/* The brand's one cream touch: selected text */
.light.light ::selection { background: #fbf1cc; color: #376169; }
.dark.dark ::selection { background: #3a3824; color: #f7e29c; }