/* ==========================================================================
   Balaji Agency Software — Design Tokens
   Every color, size, duration and easing used anywhere in the product is
   declared here. Nothing outside this file may use a literal hex code, a
   literal pixel size, or a literal duration — see docs/06 and docs/11 §1.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Neutrals -------------------------------------------------------- */
  --canvas:         #FAFAF8;
  --canvas-sunken:  #F5F4F1;
  --surface:        #FFFFFF;
  --surface-hover:  #FCFCFB;

  --ink-50:  #F4F3F0;
  --ink-100: #EAE8E3;
  --ink-200: #DBD8D2;
  --ink-300: #B7B3AA;
  --ink-400: #8D8981;
  --ink-500: #6B675F;
  --ink-700: #3D3B36;
  --ink-900: #1B1A17;
  --ink-900-hover: #2B2A26;

  /* ---- Accent ------------------------------------------------------------ */
  --accent-050: #F1F4FE;
  --accent-100: #DFE5FB;
  --accent-500: #5A72E3;
  --accent-600: #3A5BD9;
  --accent-700: #2C46B0;

  /* ---- Money semantics --------------------------------------------------- */
  --green-050: #E7F4EF;
  --green-600: #12805C;
  --amber-050: #FBF2E3;
  --amber-600: #B26B00;
  --red-050:   #FAEBE9;
  --red-600:   #C2372D;
  --violet-050: #F2EDFB;
  --violet-600: #6D48C9;

  --delta-up:   #0B6B4B;
  --delta-down: #B33227;

  /* ---- Data visualisation: categorical (fixed order, never cycled) ------ */
  --viz-1: #3A5BD9;  /* indigo — brand */
  --viz-2: #EB6834;  /* orange */
  --viz-3: #1BAF7A;  /* aqua */
  --viz-4: #EDA100;  /* yellow */
  --viz-5: #E87BA4;  /* magenta */
  --viz-6: #008300;  /* green */
  --viz-7: #6D48C9;  /* violet */
  --viz-8: #E34948;  /* red */

  /* Sequential ramp (indigo), light -> dark */
  --viz-seq-100: #E1E7FB;
  --viz-seq-200: #C2CEF6;
  --viz-seq-300: #9FB2F0;
  --viz-seq-400: #7B92E9;
  --viz-seq-500: #5A72E3;
  --viz-seq-600: #3A5BD9;
  --viz-seq-700: #2C46B0;
  --viz-seq-800: #203585;

  /* Diverging: indigo <-> red, neutral midpoint */
  --viz-div-pos: #3A5BD9;
  --viz-div-neg: #C2372D;
  --viz-div-mid: #EFEEEA;

  /* Chart chrome */
  --viz-surface:   #FFFFFF;
  --viz-grid:      #EFEDE8;
  --viz-baseline:  #DBD8D2;
  --viz-axis-label:#8D8981;

  /* ---- Typography ---------------------------------------------------- */
  --font-sans: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;

  --t-display-size: 34px;  --t-display-line: 40px;  --t-display-weight: 600; --t-display-track: -0.022em;
  --t-h1-size: 26px;       --t-h1-line: 32px;       --t-h1-weight: 600;      --t-h1-track: -0.018em;
  --t-h2-size: 20px;       --t-h2-line: 28px;       --t-h2-weight: 600;      --t-h2-track: -0.014em;
  --t-h3-size: 16px;       --t-h3-line: 24px;       --t-h3-weight: 600;      --t-h3-track: -0.010em;
  --t-body-size: 14px;     --t-body-line: 21px;     --t-body-weight: 400;
  --t-body-lg-size: 15px;  --t-body-lg-line: 23px;  --t-body-lg-weight: 400;
  --t-label-size: 13px;    --t-label-line: 18px;    --t-label-weight: 500;
  --t-meta-size: 12px;     --t-meta-line: 16px;     --t-meta-weight: 400;
  --t-micro-size: 11px;    --t-micro-line: 14px;    --t-micro-weight: 500;   --t-micro-track: 0.01em;
  --t-eyebrow-size: 11px;  --t-eyebrow-line: 14px;  --t-eyebrow-weight: 600; --t-eyebrow-track: 0.06em;

  --t-money-hero-size: 34px; --t-money-hero-line: 40px; --t-money-hero-weight: 600; --t-money-hero-track: -0.02em;
  --t-money-lg-size: 22px;   --t-money-lg-line: 28px;   --t-money-lg-weight: 600;   --t-money-lg-track: -0.01em;
  --t-money-size: 14px;      --t-money-line: 20px;      --t-money-weight: 500;

  /* ---- Spacing scale --------------------------------------------------- */
  --sp-2: 2px;   --sp-4: 4px;   --sp-6: 6px;   --sp-8: 8px;
  --sp-12: 12px; --sp-16: 16px; --sp-20: 20px; --sp-24: 24px;
  --sp-32: 32px; --sp-40: 40px; --sp-48: 48px; --sp-64: 64px; --sp-80: 80px;

  /* ---- Radius ------------------------------------------------------------ */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-xs:   0 1px 2px rgba(27,26,23,.05);
  --shadow-sm:   0 1px 3px rgba(27,26,23,.06), 0 1px 2px rgba(27,26,23,.04);
  --shadow-md:   0 4px 12px rgba(27,26,23,.06), 0 1px 3px rgba(27,26,23,.04);
  --shadow-lg:   0 12px 32px rgba(27,26,23,.10), 0 2px 8px rgba(27,26,23,.05);
  --shadow-dock: 0 8px 40px rgba(27,26,23,.14), 0 2px 8px rgba(27,26,23,.07);

  --border-hairline: 1px solid var(--ink-100);

  /* ---- Z-index scale ----------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-header: 200;
  --z-popover: 400;
  --z-dock: 600;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;

  /* ---- Motion ------------------------------------------------------------ */
  --dur-instant: 80ms;
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --dur-slower: 300ms;

  --ease-out:   cubic-bezier(.22, 1, .36, 1);
  --ease-in:    cubic-bezier(.4, 0, 1, 1);
  --ease-inout: cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .64, 1);

  /* ---- Layout -------------------------------------------------------- */
  --content-max: 1560px;
  --gutter: 48px;
  --dock-clearance: 112px;
  --row-h: 68px;
  --row-h-compact: 52px;
  --table-row-h: 48px;
  --table-row-h-compact: 38px;
}

@media (min-width: 1728px) {
  :root { --gutter: 64px; }
}

/* Dark-mode tokens are reserved (docs/06 §2.5) — not activated in v1.
   Kept here, unreferenced, so the future toggle is a values-only change. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    color-scheme: dark;
  }
}