/* Vidia — color tokens
   Light-first: light values live on :root AND [data-theme="light"], so a
   subtree can force light even when a host stamps dark higher up.
   Dark theme via [data-theme="dark"]. */

:root, [data-theme="light"] {
  /* ---- Vidia expressive palette ---- */
  --green-light: #DAF4DF;
  --green: #5EBF60;
  --green-dark: #4FA84F;
  --blue-light: #C5EBEA;
  --blue: #5BC0E5;
  --blue-dark: #0D4D82;
  --purple-light: #C3A9F3;
  --purple: #B37BCD;
  --purple-dark: #5B258B;
  --pink-light: #E7A5F0;
  --pink: #F62A91;
  --pink-dark: #B10062;
  --red-light: #F8AE95;
  --red: #FF4338;
  --red-dark: #BA1530;
  --orange-light: #D6C79E;
  --orange: #FF7412;
  --orange-dark: #8B4500;
  --yellow-light: #FFF43B;
  --yellow: #FCBD00;
  --yellow-dark: #DF8900;
  --black-light: #44484D;
  --black: #121417;
  --true-black: #000000;

  /* ---- Base neutrals ---- */
  --paper-0: #FFFFFF;   /* brightest ambient */
  --paper-1: #F7F7FB;   /* app background */
  --paper-2: #F1F1F5;   /* recessed wells, table headers */
  --paper-3: #E5E6EA;   /* pressed / hairline-adjacent fill */

  --ink-1: var(--black); /* primary text */
  --ink-2: #5F646B;     /* secondary text */
  --ink-3: #8A8E94;     /* tertiary / placeholder */
  --ink-4: #B9BCC1;     /* disabled */

  --line-1: rgba(18, 20, 23, 0.08);  /* hairline */
  --line-2: rgba(18, 20, 23, 0.16);  /* stronger border (inputs) */

  /* ---- Surfaces ---- */
  --surface-card: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sheet: #FFFFFF;
  --surface-inverse: var(--black);   /* dark pill controls */
  --on-inverse: #FFFFFF;

  /* ---- Semantic ---- */
  --positive: var(--green);
  --positive-tint: var(--green-light);
  --caution: var(--yellow-dark);
  --caution-tint: color-mix(in srgb, var(--yellow-light) 28%, white);
  --negative: var(--red);
  --negative-tint: color-mix(in srgb, var(--red-light) 32%, white);
  --info: var(--blue-dark);
  --info-tint: color-mix(in srgb, var(--blue-light) 55%, white);

  /* ---- Default expressive accent (component compatibility aliases) ---- */
  --accent: var(--purple);
  --accent-deep: var(--purple-dark);
  --accent-tint: color-mix(in srgb, var(--purple-light) 58%, white);
  --accent-wash: color-mix(in srgb, var(--purple-light) 22%, white);
  --on-accent: var(--black);

  /* ---- Buttons ----
     Promoted from the landing site, where these five values were declared twice
     (nav.css and index.html) and belonged to no layer. The face runs dark at the
     top to lighter at the bottom, so the pill reads as lit from below; the depth
     colour is a hard offset shadow, not a blur, which is what gives the button
     its physical press. */
  --button-primary-face: linear-gradient(180deg, #252630 0%, #66657C 100%);
  --button-primary-border: rgba(215, 211, 238, 0.34);
  --button-primary-depth: #454455;
  --button-primary-ink: #FFFFFF;
  --button-secondary-face: #FCFCFB;
  --button-secondary-depth: #C9CBD0;
  --button-secondary-ink: var(--black);

  /* ---- Primary action ----
     Aliases of the button tokens above. These previously carried their own
     oklab ramp that ran light-at-top to dark-at-bottom — the inverse of the
     shipped button — with a pale #B1AEC1 depth, so anything consuming them
     rendered a washed-out slab that did not match the site. */
  --action-primary: var(--button-primary-face);
  --action-primary-shadow: 0 7px 0 var(--button-primary-depth);

  /* ---- Ambient wash (purple + blue, greeting & building moments only) ---- */
  --aurora: radial-gradient(120% 80% at 10% 0%, color-mix(in srgb, var(--purple-light) 55%, transparent) 0%, transparent 64%),
            radial-gradient(100% 70% at 100% 100%, color-mix(in srgb, var(--blue-light) 58%, transparent) 0%, transparent 60%); /* @kind other */

  /* ---- Scrim (modal dimmer behind sheets) ---- */
  --scrim: rgba(18, 20, 23, 0.24);

  /* ---- Aliases ---- */
  --text-body: var(--ink-1);
  --text-secondary: var(--ink-2);
  --text-tertiary: var(--ink-3);
  --surface-app: var(--paper-1);
  --mastery-track: var(--paper-3);
}

[data-theme="dark"] {
  --paper-0: #232220;
  --paper-1: #191816;
  --paper-2: #211F1D;
  --paper-3: #2B2926;

  --ink-1: #F2F0EC;
  --ink-2: #B4B0A9;
  --ink-3: #85817A;
  --ink-4: #57544F;

  --line-1: rgba(242, 240, 236, 0.09);
  --line-2: rgba(242, 240, 236, 0.16);

  --surface-card: #232220;
  --surface-raised: #2B2926;
  --surface-sheet: #211F1D;
  --surface-inverse: #F2F0EC;
  --on-inverse: var(--black);

  --positive: #6FBE8F;
  --positive-tint: #223328;
  --caution: #D9A24C;
  --caution-tint: #352C1B;
  --negative: #D97862;
  --negative-tint: #38231E;
  --info: #7FA6D0;
  --info-tint: #1F2A38;

  --scrim: rgba(0, 0, 0, 0.55);

  --accent: var(--purple-light);
  --accent-deep: #D7C6F8;
  --accent-tint: #35294A;
  --accent-wash: #282231;
  --on-accent: var(--black);

  /* Dark: the primary pill inverts to a light face with dark ink, mirroring the
     light theme's ramp (bright at the top, settling darker at the bottom). */
  --button-primary-face: linear-gradient(180deg, #F2F0EC 0%, #B4B0A9 100%);
  --button-primary-border: rgba(18, 20, 23, 0.18);
  --button-primary-depth: #57544F;
  --button-primary-ink: var(--black);
  --button-secondary-face: #2B2926;
  --button-secondary-depth: #191816;
  --button-secondary-ink: #F2F0EC;

  --action-primary: var(--button-primary-face);
  --action-primary-shadow: 0 7px 0 var(--button-primary-depth);

  --aurora: radial-gradient(120% 80% at 10% 0%, rgba(91, 37, 139, 0.38) 0%, transparent 64%),
            radial-gradient(100% 70% at 100% 100%, rgba(13, 77, 130, 0.34) 0%, transparent 60%); /* @kind other */
}