/*
 * Indigo theme — TechFX apps for end users (Payroll, Accounting, Exchange).
 *
 * Codename `indigo`: the brand primary at #380e7a is HSL(262°, 80%, 27%) —
 * a deep royal indigo, the same blue-violet Newton placed between blue and
 * violet on the original color wheel. Indigo dye is one of the oldest in
 * human history (~6000 BCE in Peru; later Indus Valley, Egypt, Greece,
 * China, Mughal). Future sibling themes can use names from the natural-dye
 * family (`madder`, `woad`, `weld`, `cochineal`, `henna`).
 *
 * 1:1 mirror of the Tokens Figma library (D0VcOa7M1IzQdCKhW2JPxS),
 * Primitive (Colors) + Semantic (Colors) collections. Primitive names match
 * each variable's `codeSyntax.WEB`; hex values match Figma's resolved color.
 * Semantic tokens are `var(--<primitive>)` references that mirror the Figma
 * VARIABLE_ALIAS chain — never raw hex.
 *
 * Import order in consuming apps:
 *
 *   @import "ui/base";
 *   @import "ui/themes/indigo";
 */

:root {
  /* ════════════════ Tier 1 — Primitives ════════════════ */

  /* ──── Primary (brand purple) ──── */
  --color-primary-25:  #fcfaff;
  --color-primary-50:  #f9f5ff;
  --color-primary-100: #f4ebff;
  --color-primary-200: #e5d7fb;
  --color-primary-300: #d5c3f1;
  --color-primary-400: #c5afe7;
  --color-primary-500: #b59cde;
  --color-primary-600: #a588d4;
  --color-primary-700: #8660c0;
  --color-primary-800: #6639ad;
  --color-primary-900: #461199;
  --color-primary-950: #380e7a;
  --color-primary-975: #2a0a5c;

  /* ──── Secondary (positive green) ──── */
  --color-secondary-25:  #e7fdf5;
  --color-secondary-50:  #d0fbeb;
  --color-secondary-100: #b8f8e0;
  --color-secondary-200: #a0f6d6;
  --color-secondary-300: #71f2c2;
  --color-secondary-400: #41edad;
  --color-secondary-500: #12e999;
  --color-secondary-600: #0eba7a;
  --color-secondary-700: #0b8c5c;
  --color-secondary-800: #075d3d;
  --color-secondary-900: #05462e;
  --color-secondary-950: #042f1f;
  --color-secondary-975: #02170f;

  /* ──── Grey (neutral) ──── */
  --color-grey-50:  #fcfcfd;
  --color-grey-100: #f9fafb;
  --color-grey-200: #f2f4f7;
  --color-grey-300: #d8dce3;
  --color-grey-400: #a6b0bf;
  --color-grey-500: #98a2b3;
  --color-grey-600: #667085;
  --color-grey-700: #475467;
  --color-grey-800: #344054;
  --color-grey-900: #1d2939;
  --color-grey-950: #101828;

  /* ──── Error (danger red) ──── */
  --color-error-50:  #fffbfa;
  --color-error-100: #fff0ef;
  --color-error-200: #fee4e2;
  --color-error-300: #fecdca;
  --color-error-400: #fda29b;
  --color-error-500: #f97066;
  --color-error-600: #f04438;
  --color-error-700: #d92d20;
  --color-error-800: #b42318;
  --color-error-900: #912018;
  --color-error-950: #5b150a;

  /* ──── Warning (orange) ──── */
  --color-warning-50:  #fffcf5;
  --color-warning-100: #fff7e2;
  --color-warning-200: #fef0c7;
  --color-warning-300: #fedf89;
  --color-warning-400: #fec84b;
  --color-warning-500: #fdb022;
  --color-warning-600: #f79009;
  --color-warning-700: #dc6803;
  --color-warning-800: #b54708;
  --color-warning-900: #93370d;
  --color-warning-950: #632308;

  /* ──── Pure ──── */
  --color-white: #ffffff;
  --color-black: #07020f;

  /* ──── Opacity (dark overlays) ────
     Figma's Opacity/Dark-* variables resolve to opaque black; the engine
     applies the named alpha so the overlay actually renders as a tint. */
  --color-opacity-dark-25: rgb(0 0 0 / 0.25);
  --color-opacity-dark-50: rgb(0 0 0 / 0.5);

  /* ════════════════ Tier 2 — Semantic ════════════════
     Each semantic is a `var(--<primitive>)` reference matching the Figma
     VARIABLE_ALIAS chain. */

  /* ──── Backgrounds — Brand ──── */
  --color-background-brand-default:  var(--color-primary-950);
  --color-background-brand-dark:     var(--color-primary-950);
  --color-background-brand-darkest:  var(--color-primary-975);
  --color-background-brand-light:    var(--color-primary-100);
  --color-background-brand-lightest: var(--color-primary-50);
  --color-background-brand-medium:   var(--color-primary-800);
  --color-background-brand-tertiary: var(--color-primary-700);

  /* ──── Backgrounds — Danger ──── */
  --color-background-danger-dark:    var(--color-error-800);
  --color-background-danger-default: var(--color-error-600);
  --color-background-danger-light:   var(--color-error-100);
  --color-background-danger-medium:  var(--color-error-500);

  /* ──── Backgrounds — Inverse (light surfaces) ──── */
  --color-background-inverse-dark:     var(--color-grey-400);
  --color-background-inverse-darkest:  var(--color-grey-500);
  --color-background-inverse-default:  var(--color-grey-300);
  --color-background-inverse-light:    var(--color-grey-200);
  --color-background-inverse-lightest: var(--color-grey-100);
  --color-background-inverse-white:    var(--color-white);

  /* ──── Backgrounds — Neutral (dark surfaces) ──── */
  --color-background-neutral-dark:     var(--color-grey-800);
  --color-background-neutral-darkest:  var(--color-grey-900);
  --color-background-neutral-default:  var(--color-grey-600);
  --color-background-neutral-light:    var(--color-grey-400);
  --color-background-neutral-lightest: var(--color-grey-200);
  --color-background-neutral-medium:   var(--color-grey-500);

  /* ──── Backgrounds — Positive ──── */
  --color-background-positive-dark:     var(--color-secondary-600);
  --color-background-positive-darkest:  var(--color-secondary-700);
  --color-background-positive-default:  var(--color-secondary-200);
  --color-background-positive-light:    var(--color-secondary-50);
  --color-background-positive-lightest: var(--color-secondary-25);
  --color-background-positive-medium:   var(--color-secondary-100);

  /* ──── Backgrounds — Warning ──── */
  --color-background-warning-dark:     var(--color-warning-600);
  --color-background-warning-darkest:  var(--color-warning-700);
  --color-background-warning-default:  var(--color-warning-300);
  --color-background-warning-light:    var(--color-warning-200);
  --color-background-warning-lightest: var(--color-warning-100);
  --color-background-warning-medium:   var(--color-warning-400);

  /* ──── Borders ──── */
  --color-border-brand-primary:   var(--color-primary-950);
  --color-border-brand-secondary: var(--color-primary-800);
  --color-border-brand-tertiary:  var(--color-primary-200);
  --color-border-negative-dark:   var(--color-error-600);
  --color-border-negative-light:  var(--color-error-300);
  --color-border-neutral-dark:    var(--color-grey-950);
  --color-border-neutral-default: var(--color-grey-600);
  --color-border-neutral-light:   var(--color-grey-300);
  --color-border-neutral-medium:  var(--color-grey-400);
  --color-border-positive-dark:   var(--color-secondary-600);
  --color-border-positive-light:  var(--color-secondary-300);
  --color-border-warning-dark:    var(--color-warning-700);
  --color-border-warning-light:   var(--color-warning-500);
  --color-border-white:           var(--color-white);

  /* ──── Text — Brand ──── */
  --color-text-brand-primary:   var(--color-primary-950);
  --color-text-brand-secondary: var(--color-primary-800);
  --color-text-brand-tertiary:  var(--color-primary-600);

  /* ──── Text — Danger ──── */
  --color-text-danger-dark:    var(--color-error-800);
  --color-text-danger-default: var(--color-error-600);
  --color-text-danger-light:   var(--color-error-300);
  --color-text-danger-medium:  var(--color-error-700);

  /* ──── Text — Inverse ──── */
  --color-text-inverse-primary:   var(--color-white);
  --color-text-inverse-secondary: var(--color-grey-100);
  --color-text-inverse-tertiary:  var(--color-grey-300);

  /* ──── Text — Neutral ──── */
  --color-text-neutral-dark:   var(--color-grey-900);
  --color-text-neutral-light:  var(--color-grey-400);
  --color-text-neutral-medium: var(--color-grey-600);

  /* ──── Text — Positive ──── */
  --color-text-positive-primary:   var(--color-secondary-600);
  --color-text-positive-secondary: var(--color-secondary-700);
  --color-text-positive-tertiary:  var(--color-secondary-800);

  /* ──── Text — Warning ──── */
  --color-text-warning-primary:   var(--color-warning-900);
  --color-text-warning-secondary: var(--color-warning-700);
  --color-text-warning-tertiary:  var(--color-warning-600);

  /* ──── Overlay ──── */
  --color-overlay-25: var(--color-opacity-dark-25);

  /* ════════════════ Shadows ════════════════
     1:1 mirror of Tokens library `D0VcOa7M1IzQdCKhW2JPxS` effect
     styles `Shadow/2xs|xs|sm|md|lg|xl`. Figma stores these as Effect
     styles (not Variables), so we mirror by hand. Update both this
     file and the Tokens lib together; never diverge silently. */
  --shadow-2xs: 0 2px 20px 0 rgb(16 24 40 / 0.02);
  --shadow-xs:  0 1px 2px 0 rgb(16 24 40 / 0.05);
  --shadow-sm:  0 1px 2px 0 rgb(16 24 40 / 0.06),
                0 1px 3px 0 rgb(16 24 40 / 0.10);
  --shadow-md:  0 4px 10px 0 rgb(16 24 40 / 0.05);
  --shadow-lg:  0 4px 6px -2px rgb(16 24 40 / 0.05),
                0 12px 16px -4px rgb(16 24 40 / 0.10);
  --shadow-xl:  0 4px 34px 0 rgb(16 24 40 / 0.16);
}