/* tokens.css — the only file with raw values.
   Tier 1 primitives are referenced ONLY by tier 2.
   Component and screen CSS use tier 2 only. */

:root {
  /* ─────────── Tier 1: primitives ─────────── */

  /* colour scales */
  --scale-indigo-900: #16203a;
  --scale-indigo-800: #1b2a4e;
  --scale-indigo-700: #24397a;
  --scale-indigo-600: #2e4a9e;
  --scale-indigo-200: #c9d3ee;
  --scale-indigo-100: #e3e8f5;
  --scale-indigo-50: #f0f3fa;

  --scale-kesar-700: #b85a0e;
  --scale-kesar-600: #d9680f;
  --scale-kesar-500: #ee7a1a;
  --scale-kesar-100: #fde9d6;
  --scale-kesar-50: #fff4e8;

  --scale-kumkum-700: #7f1830;
  --scale-kumkum-600: #a32040;
  --scale-kumkum-100: #f8dee4;

  --scale-sand-400: #c9bda2;
  --scale-sand-300: #d9d0bc;
  --scale-sand-200: #e8e2d3;
  --scale-sand-100: #f1ede3;

  --scale-lime-50: #f5f5f1;
  --scale-white: #ffffff;

  --scale-grey-800: #2b3040;
  --scale-grey-700: #4a5061;
  --scale-grey-500: #6f7587;
  --scale-grey-300: #b9bdc9;
  --scale-grey-200: #d8dbe3;

  --scale-green-700: #23663f;
  --scale-green-600: #2e7d4f;
  --scale-green-100: #ddf1e5;

  --scale-overlay: rgba(22, 32, 58, 0.55);
  --scale-shadow-soft: rgba(22, 32, 58, 0.08);
  --scale-shadow-deep: rgba(22, 32, 58, 0.18);

  /* spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* type */
  --face-display: "Rozha One", "Tiro Devanagari Hindi", Georgia, serif;
  --face-body: "Mukta", "Hind", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 15px;
  --fs-lg: 17px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 34px;
  --fs-4xl: 44px;
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.5;

  /* shadow */
  --shadow-1: 0 1px 2px var(--scale-shadow-soft);
  --shadow-2: 0 6px 20px var(--scale-shadow-soft);
  --shadow-3: 0 -8px 32px var(--scale-shadow-deep);

  /* dimensions */
  --dim-hair: 2px;
  --dim-bar-thin: 4px;
  --dim-bar: 8px;
  --dim-accent-bar: 3px;
  --dim-phone-w: 390px;
  --dim-phone-h: 844px;
  --dim-appbar-h: 56px;
  --dim-tabbar-h: 64px;
  --dim-control-h: 48px;
  --dim-control-h-sm: 36px;
  --dim-chip-h: 28px;
  --dim-chip-h-sm: 22px;
  --dim-count: 18px;
  --dim-switch-w: 46px;
  --dim-switch-h: 26px;
  --dim-switch-knob: 20px;
  --dim-switch-pad: 3px;
  --dim-avatar: 44px;
  --dim-avatar-lg: 72px;
  --dim-card-photo-h: 272px; /* was 320: one card filled the whole phone screen above the fold */
  --dim-tile-photo-h: 180px;
  --dim-detail-photo-h: 380px;
  --dim-tile-w: 150px;
  --dim-event-date-w: 56px;
  --dim-tap-min: 44px;
  --dim-icon-xs: 14px;
  --dim-icon-sm: 18px;
  --dim-icon: 22px;
  --dim-icon-xl: 28px;
  --dim-icon-lg: 40px;
  --dim-max-line: 60ch;
  --dim-sheet-max: 88%;
  --dim-drawer-w: 86%;
  --fx-blur: 10px;

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ─────────── Tier 2: semantic ─────────── */

  /* surfaces + text */
  --color-canvas: var(--scale-lime-50);
  --color-surface: var(--scale-white);
  --color-surface-sunken: var(--scale-sand-100);
  --color-ink: var(--scale-indigo-900);
  --color-ink-muted: var(--scale-grey-700);
  --color-ink-faint: var(--scale-grey-500);
  --color-line: var(--scale-sand-200);
  --color-line-strong: var(--scale-sand-400);
  --color-overlay: var(--scale-overlay);

  /* brand (indigo) */
  --color-brand: var(--scale-indigo-700);
  --color-brand-strong: var(--scale-indigo-800);
  --color-brand-fg: var(--scale-white);
  --color-brand-soft-bg: var(--scale-indigo-50);
  --color-brand-soft-border: var(--scale-indigo-200);
  --color-brand-soft-fg: var(--scale-indigo-700);

  /* accent (kesariya) — primary action only */
  --color-accent: var(--scale-kesar-600);
  --color-accent-hover: var(--scale-kesar-700);
  --color-accent-fg: var(--scale-white);
  --color-accent-soft-bg: var(--scale-kesar-50);
  --color-accent-soft-border: var(--scale-kesar-100);
  --color-accent-soft-fg: var(--scale-kesar-700);

  /* interest (kumkum) — received interests, love-ish marks */
  --color-interest: var(--scale-kumkum-600);
  --color-interest-fg: var(--scale-white);
  --color-interest-soft-bg: var(--scale-kumkum-100);
  --color-interest-soft-fg: var(--scale-kumkum-700);

  /* status */
  --color-success: var(--scale-green-600);
  --color-success-fg: var(--scale-white);
  --color-success-soft-bg: var(--scale-green-100);
  --color-success-soft-fg: var(--scale-green-700);
  --color-danger: var(--scale-kumkum-700);
  --color-danger-fg: var(--scale-white);
  --color-danger-soft-bg: var(--color-interest-soft-bg);
  --color-danger-soft-fg: var(--color-interest-soft-fg);

  /* aliases for domain concepts (never re-declare a value) */
  --color-verified: var(--color-brand);
  --color-verified-soft-bg: var(--color-brand-soft-bg);
  --color-verified-soft-fg: var(--color-brand-soft-fg);
  --color-focus: var(--scale-indigo-600);
  --color-tab-bar-bg: var(--color-ink);
  --color-tab-bar-fg: var(--scale-grey-300);
  --color-tab-bar-active: var(--scale-kesar-500);
  --color-photo-bg: var(--scale-sand-200);
  --color-photo-fg: var(--scale-sand-400);
  --color-photo-bg-alt: var(--scale-indigo-100);
  --color-photo-fg-alt: var(--scale-indigo-200);
  --color-control-bg: var(--color-surface);
  --color-control-border: var(--scale-grey-200);
  --color-control-placeholder: var(--color-ink-faint);
  --color-disabled-bg: var(--scale-sand-100);
  --color-disabled-fg: var(--color-ink-faint);

  /* spacing semantics */
  --gap-hair: var(--dim-hair);
  --gap-tight: var(--space-1);
  --gap-compact: var(--space-2);
  --gap-default: var(--space-3);
  --gap-loose: var(--space-4);
  --gap-section: var(--space-6);
  --gap-hero: var(--space-10);
  --inset-screen: var(--space-4);
  --inset-card: var(--space-4);
  --inset-control: var(--space-4);
  --inset-chip: var(--space-3);
  --inset-sheet: var(--space-5);

  /* radius semantics */
  --radius-control: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-chip: var(--radius-pill);
  --radius-sheet: var(--radius-xl);
  --radius-tile: var(--radius-md);
  --radius-thumb: var(--radius-sm);
  --radius-phone: var(--radius-xl);

  /* sizes */
  --control-h: var(--dim-control-h);
  --control-h-sm: var(--dim-control-h-sm);
  --chip-h: var(--dim-chip-h);
  --chip-h-sm: var(--dim-chip-h-sm);
  --count-size: var(--dim-count);
  --switch-w: var(--dim-switch-w);
  --switch-h: var(--dim-switch-h);
  --switch-knob: var(--dim-switch-knob);
  --switch-pad: var(--dim-switch-pad);
  --appbar-h: var(--dim-appbar-h);
  --tabbar-h: var(--dim-tabbar-h);
  --avatar-size: var(--dim-avatar);
  --avatar-size-lg: var(--dim-avatar-lg);
  --card-photo-h: var(--dim-card-photo-h);
  --tile-photo-h: var(--dim-tile-photo-h);
  --detail-photo-h: var(--dim-detail-photo-h);
  --tile-w: var(--dim-tile-w);
  --event-date-w: var(--dim-event-date-w);
  --tap-min: var(--dim-tap-min); /* smallest touch target (WCAG 2.5.8 wants 24, platforms 44–48) */
  --icon-size-xs: var(--dim-icon-xs);
  --icon-size-sm: var(--dim-icon-sm);
  --icon-size: var(--dim-icon);
  --icon-size-xl: var(--dim-icon-xl);
  --icon-size-lg: var(--dim-icon-lg);
  --bar-h-thin: var(--dim-bar-thin);
  --bar-h: var(--dim-bar);
  --accent-bar-w: var(--dim-accent-bar);
  --tab-underline-h: var(--dim-hair);
  --sheet-max-h: var(--dim-sheet-max);
  --drawer-w: var(--dim-drawer-w);
  --sheet-handle-w: var(--dim-icon-lg);
  --sheet-handle-h: var(--dim-bar-thin);
  --photo-blur: var(--fx-blur);
  --phone-w: var(--dim-phone-w);
  --phone-h: var(--dim-phone-h);
  --max-line: var(--dim-max-line);

  /* type semantics */
  --font-display: var(--face-display);
  --font-body: var(--face-body);
  --text-caption: var(--fs-xs);
  --text-label: var(--fs-sm);
  --text-body: var(--fs-md);
  --text-lead: var(--fs-lg);
  --text-title: var(--fs-xl);
  --text-heading: var(--fs-2xl);
  --text-display: var(--fs-3xl);
  --text-hero: var(--fs-4xl);
  --leading-tight: var(--lh-tight);
  --leading-snug: var(--lh-snug);
  --leading-body: var(--lh-body);

  /* shadows */
  --shadow-card: var(--shadow-1);
  --shadow-raised: var(--shadow-2);
  --shadow-sheet: var(--shadow-3);
  --shadow-focus: 0 0 0 var(--dim-accent-bar) var(--color-brand-soft-bg);

  /* motion */
  --motion-fast: var(--dur-fast) var(--ease-out);
  --motion-base: var(--dur-base) var(--ease-out);
}

/* Dark remap — tier 2 only. Not the shipped default; opt in with data-theme="dark". */
:root[data-theme="dark"] {
  --color-canvas: var(--scale-indigo-900);
  --color-surface: var(--scale-indigo-800);
  --color-surface-sunken: var(--scale-grey-800);
  --color-ink: var(--scale-lime-50);
  --color-ink-muted: var(--scale-grey-300);
  --color-ink-faint: var(--scale-grey-500);
  --color-line: var(--scale-grey-800);
  --color-line-strong: var(--scale-grey-700);
  --color-brand: var(--scale-indigo-200);
  --color-brand-strong: var(--scale-indigo-100);
  --color-brand-fg: var(--scale-indigo-900);
  --color-brand-soft-bg: var(--scale-grey-800);
  --color-brand-soft-border: var(--scale-grey-700);
  --color-brand-soft-fg: var(--scale-indigo-200);
  --color-accent-soft-bg: var(--scale-grey-800);
  --color-accent-soft-border: var(--scale-kesar-700);
  --color-accent-soft-fg: var(--scale-kesar-500);
  --color-interest-soft-bg: var(--scale-grey-800);
  --color-interest-soft-fg: var(--scale-kumkum-100);
  --color-success-soft-bg: var(--scale-grey-800);
  --color-success-soft-fg: var(--scale-green-100);
  --color-tab-bar-bg: var(--scale-grey-800);
  --color-photo-bg: var(--scale-grey-800);
  --color-photo-fg: var(--scale-grey-700);
  --color-photo-bg-alt: var(--scale-grey-800);
  --color-photo-fg-alt: var(--scale-indigo-700);
  --color-control-bg: var(--scale-grey-800);
  --color-control-border: var(--scale-grey-700);
  --color-disabled-bg: var(--scale-grey-800);
}