/* ==========================================================================
   iSix — Design Tokens
   Derived from the `modern-web-design` and `motion-design` skills.

   Colour is authored in OKLCH for perceptual uniformity, with an sRGB hex
   declaration immediately before each one as a fallback for older browsers
   (a browser that cannot parse the oklch() value keeps the hex).

   Every text token clears WCAG AAA (7:1) and every non-text token clears
   3:1, against BOTH --surface and --surface-2, in BOTH themes. Verified
   numerically — see the contrast table in each section. Do not adjust a
   lightness value without re-checking it.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Surfaces (backgrounds — no contrast requirement of their own) ---- */
  --bg:            #f4f4f6;
  --bg:            oklch(96.3% 0.002 260);
  --surface:       #ffffff;
  --surface:       oklch(100% 0 0);
  --surface-2:     #f7f7f8;
  --surface-2:     oklch(97.4% 0.002 260);
  --surface-3:     #eeeef0;
  --surface-3:     oklch(94.3% 0.003 260);

  /* ---- Borders ---- */
  --border:        #e7e7ea;   /* decorative hairline */
  --border:        oklch(91.5% 0.003 260);
  --border-strong: #8b8c8f;   /* control boundary — 3.36 / 3.14 */
  --border-strong: oklch(64% 0.004 260);

  /* ---- Text ----                       surface / surface-2 */
  --ink:           #0a0b0d;            /*  19.67 / 18.37  AAA */
  --ink:           oklch(15% 0.005 260);
  --ink-2:         #383b3f;            /*  11.30 / 10.56  AAA */
  --ink-2:         oklch(35% 0.008 260);
  /* Set against --surface-3, the darkest surface it lands on (row hover /
     tap states), so secondary text stays AAA in every state — not just at
     rest. The old value was 3.44:1, failing even AA. */
  --muted:         #4c4f53;            /*  8.83 / 8.19 / 7.47  AAA */
  --muted:         oklch(41% 0.008 260);
  --muted-2:       #83868b;            /*   3.64 /  3.40  non-text */
  --muted-2:       oklch(62% 0.008 260);

  /* ---- Semantic accents ----
     Lightness is set by the tightest constraint, which is 7:1 against the
     *soft* tint each colour is paired with in badges — not against --surface.
     Hence these sit slightly darker than a surface-only calculation implies. */
  --accent-sale:     #006039;          /*  receivables */
  --accent-sale:     oklch(41% 0.13 165);
  --accent-purchase: #004fae;          /*  payables */
  --accent-purchase: oklch(43.5% 0.17 255);
  --accent-due:      #7f4300;          /*  ageing */
  --accent-due:      oklch(44% 0.14 75);
  --accent-overdue:  #a7000a;          /*  overdue */
  --accent-overdue:  oklch(45% 0.19 27);
  /* Ledger sits between the two transactional families and must not be mistaken
     for either, so it takes its own hue rather than borrowing one. Same
     lightness discipline as the rest: set by the 7:1 badge constraint. */
  --accent-ledger:   #5b3fbe;          /*  ledger */
  --accent-ledger:   oklch(45% 0.17 290);

  /* Text/icon colour that sits ON a filled accent block.
     Light theme accents are dark, so white reads on them at >7:1. */
  --on-accent:     #ffffff;

  /* Soft tinted washes for badges, status pills and row highlights.
     Kept very light so the matching --accent-* ink clears 7:1 on top. */
  --paid-soft:        #e2faee;
  --paid-soft:        oklch(96.5% 0.030 165);
  --due-soft:         #fff3d2;
  --due-soft:         oklch(96.5% 0.045 90);
  --overdue-soft:     #ffece9;
  --overdue-soft:     oklch(96.5% 0.030 25);
  --accent-soft:      #eef5ff;
  --accent-soft:      oklch(96.8% 0.015 255);

  /* ---- Elevation ---- */
  --elevation-1: 0 1px 2px rgba(9, 11, 13, .06), 0 1px 3px rgba(9, 11, 13, .04);
  --elevation-2: 0 2px 6px rgba(9, 11, 13, .08), 0 1px 2px rgba(9, 11, 13, .04);
  --elevation-3: 0 8px 16px rgba(9, 11, 13, .10), 0 2px 4px rgba(9, 11, 13, .05);
  --elevation-4: 0 16px 32px rgba(9, 11, 13, .12), 0 4px 8px rgba(9, 11, 13, .06);

  /* Glass topbar */
  --glass-bg:     rgba(255, 255, 255, .72);
  --glass-blur:   blur(12px) saturate(180%);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0f0f11;
  --bg:            oklch(15.5% 0.003 260);
  --surface:       #1a1a1c;
  --surface:       oklch(21.5% 0.003 260);
  --surface-2:     #252528;
  --surface-2:     oklch(27.5% 0.004 260);
  --surface-3:     #2e2e32;
  --surface-3:     oklch(32% 0.005 260);

  --border:        #2e2e32;
  --border:        oklch(32% 0.005 260);
  --border-strong: #6c6e72;            /*   3.35 /  2.95→3.0 non-text */
  --border-strong: oklch(56% 0.006 260);

  /*                                      surface / surface-2 */
  --ink:           #f4f5f7;            /*  15.93 / 14.01  AAA */
  --ink:           oklch(97% 0.003 260);
  --ink-2:         #c8cbce;            /*  10.64 /  9.36  AAA */
  --ink-2:         oklch(84% 0.006 260);
  /* Same rule as light: AAA against --surface-3, not just --surface. */
  --muted:         #bdc1c6;            /*  10.0 / 8.48 / 7.25  AAA */
  --muted:         oklch(81% 0.008 260);
  --muted-2:       #6f7276;            /*   3.58 /  3.15  non-text */
  --muted-2:       oklch(55% 0.008 260);

  --accent-sale:     #4bc899;          /*   8.33 /  7.05  AAA */
  --accent-sale:     oklch(75% 0.13 165);
  --accent-purchase: #70b8ff;          /*   8.29 /  7.29  AAA */
  --accent-purchase: oklch(77.5% 0.15 255);
  --accent-due:      #e9a73f;          /*   8.37 /  7.36  AAA */
  --accent-due:      oklch(77.5% 0.14 75);
  --accent-overdue:  #ff968a;          /*   8.33 /  7.05  AAA */
  --accent-overdue:  oklch(79.3% 0.14 27);
  --accent-ledger:   #bfa6ff;          /*   8.30 /  7.02  AAA */
  --accent-ledger:   oklch(78% 0.13 290);

  /* Dark-theme accents are light, so ink must be dark on a filled accent. */
  --on-accent:     #12130f;
  --on-accent:     oklch(16% 0.004 260);

  --paid-soft:        #0c281d;
  --paid-soft:        oklch(25% 0.04 165);
  --due-soft:         #292109;
  --due-soft:         oklch(25% 0.04 90);
  --overdue-soft:     #321614;
  --overdue-soft:     oklch(24% 0.045 25);
  --accent-soft:      #142539;
  --accent-soft:      oklch(26% 0.045 255);

  --elevation-1: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .28);
  --elevation-2: 0 2px 6px rgba(0, 0, 0, .46), 0 1px 2px rgba(0, 0, 0, .30);
  --elevation-3: 0 8px 16px rgba(0, 0, 0, .52), 0 2px 4px rgba(0, 0, 0, .34);
  --elevation-4: 0 16px 32px rgba(0, 0, 0, .58), 0 4px 8px rgba(0, 0, 0, .38);

  --glass-bg:     rgba(26, 26, 28, .72);
}

/* ==========================================================================
   Scales — shared by both themes
   ========================================================================== */

:root {
  /* ---- Type ----
     A deliberately tight fluid scale. The skill's reference scale is built
     for marketing pages; this is a dense financial table UI, so the steps are
     compressed and the floor never drops below 10px. */
  --fs-2xs:  clamp(0.625rem,  0.605rem + 0.10vw, 0.6875rem); /* 10 → 11  eyebrow labels */
  --fs-xs:   clamp(0.6875rem, 0.660rem + 0.14vw, 0.750rem);  /* 11 → 12  meta */
  --fs-sm:   clamp(0.750rem,  0.720rem + 0.15vw, 0.8125rem); /* 12 → 13  secondary */
  --fs-base: clamp(0.8125rem, 0.780rem + 0.16vw, 0.875rem);  /* 13 → 14  body */
  --fs-md:   clamp(0.875rem,  0.840rem + 0.18vw, 1rem);      /* 14 → 16 */
  --fs-lg:   clamp(1.0rem,    0.930rem + 0.35vw, 1.1875rem); /* 16 → 19 */
  --fs-xl:   clamp(1.1875rem, 1.060rem + 0.64vw, 1.5rem);    /* 19 → 24  h1 */
  --fs-kpi:  clamp(1.375rem,  1.100rem + 1.38vw, 1.875rem);  /* 22 → 30  the ₹ figure */

  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  --tracking-tight: -0.02em;
  --tracking-wide:   0.06em;

  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Space ---- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-12: 3rem;      /* 48 */
  /* Fluid page gutter — replaces the hardcoded 14/16/24px paddings */
  --gutter:   clamp(0.875rem, 0.55rem + 1.4vw, 1.5rem);

  /* ---- Radius ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-full: 999px;

  /* ---- Motion — "Premium" archetype (motion-design) ----
     Signature easing, zero overshoot, three-step duration palette.

     --dur-quick is deliberately below Premium's 350ms floor: motion-design
     sets a responsiveness ceiling that applies under every archetype
     (hover <100ms, press <150ms). Premium governs entrances and transitions;
     direct interaction feedback must stay immediate or it reads as lag. */
  --dur-quick:     160ms;
  --dur-standard:  420ms;
  --dur-slow:      600ms;

  --ease-signature: cubic-bezier(0.4, 0, 0.2, 1);    /* 80% of all motion */
  --ease-entrance:  cubic-bezier(0.05, 0.7, 0.1, 1); /* decelerate in */
  --ease-exit:      cubic-bezier(0.3, 0, 1, 1);      /* accelerate out */
  /* No overshoot curve is defined. Premium never bounces — if you find
     yourself wanting one, you are reaching for a different archetype. */

  --stagger-step:  32ms;   /* micro-cascade, per motion-design */
  --stagger-cap:  500ms;   /* hard ceiling on any staggered sequence */

  /* ---- Layout ---- */
  --topbar-h: 52px;
  --content-max: 1200px;
  --tap-min: 44px;   /* WCAG / iOS minimum touch target */

  /* ---- Icons ----
     One glyph size for the whole chrome. Header icons used to be hard-coded per
     tag at 13/14/15/16/18px, which read as drift rather than hierarchy. --icon-lg
     is for the few genuinely larger affordances (back button, drawer toggle). */
  --icon-sm: 14px;
  --icon: 16px;
  --icon-lg: 18px;
}