/* ============================================================
   BRAND — @AMIRBEK_KAD
   The only file in the app that holds a raw colour value.

   These are the colours from Amirbek's own brand system, not colours
   invented for this app: pine and cream as the two grounds, yellow for the
   call to action, teal for done, coral for the one that matters, violet
   used sparingly. The brand is Instagram-first, so what carries over here
   is the palette and Inter — not Bebas, and not the sharp corners, because
   a condensed display face at 13px in a table costs reading speed.

   Two surfaces, one vocabulary, selected by attributes on <html>:
       (nothing)                 -> the coaching side, a dense tool
       data-surface="portal"     -> the client portal, same brand, calmer
       data-theme="dark"         -> pine ground instead of cream

   The brand's own contrast rules are the reason some of these tokens exist.
   Yellow text on cream is 1.4:1, so yellow is a fill here and never text on
   a light ground. Coral on cream is 2.9:1, so coral fills and strokes are
   fine but coral *text* uses --color-danger-dark. core/test_brand.py checks
   the pairs that matter.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- shared across both surfaces ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --sidebar-width: 232px;
  --topbar-height: 60px;
  --tap: 46px;            /* smallest comfortable touch target */

  /* Inter throughout. The brand's display face (Bebas Neue) and hand face
     (Caveat) belong to posts and decks, not to an interface. */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* ---- the coaching side, on cream ----
     Cream is the brand's light ground; white cards lift off it so a dense
     page still has structure without heavy borders. */
  --color-bg: #FBF6EE;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EFE9DF;
  --color-border: #E4DDD0;
  --color-border-strong: #D1C8B8;

  /* Pine is the brand's ink. The muted and faint steps are pine at the
     brand's own opacities, which hold up on cream and on white. */
  --color-text: #14231F;
  --color-text-muted: #14231FB3;
  --color-text-faint: #14231F73;

  /* Pine carries ordinary actions; yellow is the call to action, exactly as
     the brand uses it. Pine text on yellow, never the other way round. */
  --color-primary: #14231F;
  --color-primary-dark: #000000;
  --color-primary-bg: #E7EAE7;
  --color-primary-border: #C6CFC9;
  --color-accent: #FFCC53;
  --color-accent-dark: #E8B534;
  --color-accent-bg: #FFF4DB;

  /* Text on a brand-coloured fill. Two tokens, not one: cream reads on
     pine (15.1:1) and pine reads on yellow, teal and coral, which is the
     brand's rule and the reason a single white token cannot work here. */
  --color-on-primary: #FBF6EE;
  --color-on-accent: #14231F;

  /* The brand's semantic tones: teal is done, yellow is attention, coral is
     the warning. The -dark steps exist because coral and yellow are fills
     on a light ground, not text on one. */
  --color-success: #25C19B;
  --color-success-bg: #E4F7F2;
  --color-warning: #FFCC53;
  --color-warning-dark: #8A6400;
  --color-warning-bg: #FFF4DB;
  --color-danger: #FF5A36;
  --color-danger-dark: #B5331A;
  --color-danger-bg: #FFE9E3;
  --color-info: oklch(70% 0.13 275);
  --color-info-bg: #EEEAFB;

  --color-bg-translucent: rgba(251, 246, 238, 0.94);
  --color-scrim: rgba(20, 35, 31, 0.5);

  --shadow-brand: 0 4px 14px rgba(20, 35, 31, 0.22);
  --shadow-brand-lg: 0 10px 26px rgba(20, 35, 31, 0.24);
  --shadow-inset-brand: 0 1px 2px rgba(20, 35, 31, 0.18);
  --shadow-sm: 0 1px 2px rgba(20, 35, 31, 0.06);
  --shadow-md: 0 6px 18px rgba(20, 35, 31, 0.08);
  --shadow-lg: 0 18px 44px rgba(20, 35, 31, 0.14);
}

/* ---- the coaching side, on pine ----
   The brand's dark ground. Pine is a deep green-charcoal and never navy.
   On pine the call to action is yellow, which is what the brand does, so
   --color-primary swaps: pine cannot be a button on a pine page. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #14231F;
  --color-surface: #1C2F2A;
  --color-surface-muted: #233831;
  --color-border: #2E443D;
  --color-border-strong: #41594F;

  --color-text: #FBF6EE;
  --color-text-muted: #FBF6EEBF;
  --color-text-faint: #FBF6EE80;

  --color-primary: #FFCC53;
  --color-primary-dark: #FFD97A;
  --color-primary-bg: #2A2A18;
  --color-primary-border: #4A451F;
  --color-accent: #FF5A36;
  --color-accent-dark: #FF7A5C;
  --color-accent-bg: #3A1D14;

  --color-on-primary: #14231F;
  --color-on-accent: #14231F;

  --color-success: #25C19B;
  --color-success-bg: #10302A;
  --color-warning: #FFCC53;
  --color-warning-dark: #FFD97A;
  --color-warning-bg: #2E2611;
  --color-danger: #FF8A6B;
  --color-danger-dark: #FFA78E;
  --color-danger-bg: #3A1D14;
  --color-info: oklch(78% 0.11 275);
  --color-info-bg: #241F3D;

  --color-bg-translucent: rgba(20, 35, 31, 0.94);
  --color-scrim: rgba(7, 14, 12, 0.65);

  --shadow-brand: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-brand-lg: 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow-inset-brand: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* ---- the client portal ----
   Same brand, different weight. A client reads this on a phone between
   sets, so the portal stays on the cream ground with larger touch targets
   and more air; the colours are the coaching side's exactly. */
:root[data-surface="portal"] {
  --color-bg: #FBF6EE;
  --color-surface: #FFFFFF;
  --color-surface-muted: #EFE9DF;
  --color-border: #E4DDD0;
  --color-border-strong: #D1C8B8;

  --color-text: #14231F;
  --color-text-muted: #14231FB3;
  --color-text-faint: #14231F73;

  --color-primary: #14231F;
  --color-primary-dark: #000000;
  --color-primary-bg: #E7EAE7;
  --color-primary-border: #C6CFC9;
  --color-accent: #FFCC53;
  --color-accent-dark: #E8B534;
  --color-accent-bg: #FFF4DB;

  --color-on-primary: #FBF6EE;
  --color-on-accent: #14231F;

  --color-success: #25C19B;
  --color-success-bg: #E4F7F2;
  --color-warning: #FFCC53;
  --color-warning-dark: #8A6400;
  --color-warning-bg: #FFF4DB;
  --color-danger: #FF5A36;
  --color-danger-dark: #B5331A;
  --color-danger-bg: #FFE9E3;
  --color-info: oklch(70% 0.13 275);
  --color-info-bg: #EEEAFB;

  --color-bg-translucent: rgba(251, 246, 238, 0.94);
  --color-scrim: rgba(20, 35, 31, 0.5);

  --shadow-brand: 0 4px 14px rgba(20, 35, 31, 0.22);
  --shadow-brand-lg: 0 10px 26px rgba(20, 35, 31, 0.24);
  --shadow-inset-brand: 0 1px 2px rgba(20, 35, 31, 0.18);
  --shadow-sm: 0 1px 3px rgba(20, 35, 31, 0.05);
  --shadow-md: 0 2px 14px rgba(20, 35, 31, 0.07);
  --shadow-lg: 0 12px 34px rgba(20, 35, 31, 0.12);
}

/* The portal at night.
   Needed as its own block, and with both attributes in the selector, because
   :root[data-surface="portal"] and :root[data-theme="dark"] have the same
   specificity -- and the portal block is written later, so without this it
   would win and a client who picked dark would get the light palette back.
   The grounds are the coaching side's: one dark, used twice. */
:root[data-surface="portal"][data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #14231F;
  --color-surface: #1C2F2A;
  --color-surface-muted: #233831;
  --color-border: #2E443D;
  --color-border-strong: #41594F;

  --color-text: #FBF6EE;
  --color-text-muted: #FBF6EEBF;
  --color-text-faint: #FBF6EE80;

  --color-primary: #FFCC53;
  --color-primary-dark: #FFD97A;
  --color-primary-bg: #2A2A18;
  --color-primary-border: #4A451F;
  --color-accent: #FF5A36;
  --color-accent-dark: #FF7A5C;
  --color-accent-bg: #3A1D14;

  --color-on-primary: #14231F;
  --color-on-accent: #14231F;

  --color-success: #25C19B;
  --color-success-bg: #10302A;
  --color-warning: #FFCC53;
  --color-warning-dark: #FFD97A;
  --color-warning-bg: #2E2611;
  --color-danger: #FF8A6B;
  --color-danger-dark: #FFA78E;
  --color-danger-bg: #3A1D14;
  --color-info: oklch(78% 0.11 275);
  --color-info-bg: #241F3D;

  --color-bg-translucent: rgba(20, 35, 31, 0.94);
  --color-scrim: rgba(7, 14, 12, 0.65);

  --shadow-brand: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-brand-lg: 0 10px 26px rgba(0, 0, 0, 0.5);
  --shadow-inset-brand: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}