/* Halo Design System — colors + type tokens
 * Source: react-design-system-package/src/theme/{colorSchemes,typography,spacing}.ts
 * Radius / elevation / motion are inferred (referenced in index.ts but missing on disk).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;900&display=swap');

@font-face {
  font-family: 'Noto Sans Devanagari';
  src: url('fonts/NotoSansDevanagari-VariableFont_wdth_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Brand — Primary (cyan) === */
  --primary:        #21bfd4;
  --primary-hover:  #08a6bb;
  --primary-active: #008ca1;
  --primary-light:  #87ffff;
  --primary-dark:   #007388;

  /* === Brand — Secondary (lime) === */
  --secondary:        #b8e986;
  --secondary-hover:  #9fd06d;
  --secondary-active: #85b653;
  --secondary-light:  #ffffec;
  --secondary-dark:   #6c9d3a;

  /* === Brand — Accent (off-white) === */
  --accent:        #f0f4f5;
  --accent-hover:  #d7dbdc;
  --accent-active: #bdc1c2;

  /* === Neutrals === */
  --white:   #ffffff;
  --gray-50: #fafafa;
  --gray-100:#f5f5f5;
  --gray-200:#e5e5e5;
  --gray-300:#d4d4d4;
  --gray-400:#a3a3a3;
  --gray-500:#737373;
  --gray-600:#525252;
  --gray-700:#404040;
  --gray-800:#262626;
  --gray-900:#171717;
  --black:   #000000;

  /* === Semantic === */
  --success:        #10b981;
  --success-light:  #d1fae5;
  --medway-green: #1ea34d;
  --medway-green-soft: rgba(30, 163, 77, 0.08);
  --medway-green-softer: rgba(30, 163, 77, 0.045);
  --medway-green-line: rgba(30, 163, 77, 0.22);
  --medway-green-glow: rgba(30, 163, 77, 0.16);
  --warning:        #f59e0b;
  --warning-light:  #fef3c7;
  --error:          #ef4444;
  --error-light:    #fee2e2;
  --info:           #8b5cf6;
  --info-light:     #ede9fe;

  /* === Surfaces === */
  --bg:       #ffffff;
  --card:     #ffffff;
  --modal:    #ffffff;
  --elevated: #ffffff;
  --overlay:  rgba(0, 0, 0, 0.5);

  /* === Text — semantic aliases === */
  --fg-1: #171717;  /* textPrimary */
  --fg-2: #525252;  /* textSecondary */
  --fg-3: #737373;  /* textTertiary */
  --fg-disabled: #a3a3a3;
  --fg-on-primary: #000000;
  --fg-on-secondary: #000000;
  --fg-on-accent: #000000;

  /* === Borders === */
  --border:        #e5e5e5;
  --border-muted:  #f5f5f5;
  --border-strong: #d4d4d4;
  --border-focus:  #21bfd4;

  /* === Type === */
  --font-brand:  'Inter', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-devanagari: 'Noto Sans Devanagari', 'Inter', sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:   'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-lg:   1.125rem;  /* 18 */
  --fs-xl:   1.25rem;   /* 20 */
  --fs-2xl:  1.5rem;    /* 24 */
  --fs-3xl:  1.875rem;  /* 30 */
  --fs-4xl:  2.25rem;   /* 36 */
  --fs-5xl:  3rem;      /* 48 */
  --fs-6xl:  3.75rem;   /* 60 */
  --fs-7xl:  4.5rem;    /* 72 */
  --fs-8xl:  6rem;      /* 96 */

  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight:   1.25;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;
  --lh-loose:   2;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* === Spacing (4px base) === */
  --space-0:  0rem;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* === Radii (inferred) === */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   6px;   /* button canonical */
  --radius-lg:   8px;   /* card canonical */
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* === Elevation (inferred) === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl: 0 24px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);

  /* === Motion (inferred) === */
  --dur-instant: 100ms;
  --dur-fast:    150ms;
  --dur-base:    200ms;
  --dur-slow:    300ms;
  --dur-slower:  500ms;
  --ease-default: ease;
  --ease-out-quart: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Layout === */
  --container-max: 75rem;       /* 1200px */
  --container-pad: 1.5rem;
  --grid-gap: 1.5rem;
  --section-gap: 5rem;
}

[data-theme='dark'] {
  --primary-hover:  #3bd9ee;
  --primary-active: #54f2ff;
  --primary-light:  #008ca1;
  --primary-dark:   #54f2ff;

  --secondary-hover:  #d2ffa0;
  --secondary-active: #ebffb9;
  --secondary-light:  #85b653;
  --secondary-dark:   #ebffb9;

  --accent-hover:  #ffffff;
  --accent-active: #ffffff;

  --white:   #000000;
  --gray-50: #0a0a0a;
  --gray-100:#141414;
  --gray-200:#1f1f1f;
  --gray-300:#2a2a2a;
  --gray-400:#525252;
  --gray-500:#737373;
  --gray-600:#a3a3a3;
  --gray-700:#d4d4d4;
  --gray-800:#e5e5e5;
  --gray-900:#f5f5f5;
  --black:   #ffffff;

  --success:       #34d399;
  --success-light: #064e3b;
  --warning:       #fbbf24;
  --warning-light: #92400e;
  --error:         #f87171;
  --error-light:   #7f1d1d;
  --info:          #a78bfa;
  --info-light:    #4c1d95;

  --bg:       #000000;
  --card:     #0a0a0a;
  --modal:    #141414;
  --elevated: #1f1f1f;
  --overlay:  rgba(255, 255, 255, 0.1);

  --fg-1: #fafafa;
  --fg-2: #d4d4d4;
  --fg-3: #a3a3a3;
  --fg-disabled: #525252;

  --border:        #2a2a2a;
  --border-muted:  #1f1f1f;
  --border-strong: #404040;
}

/* === Semantic typographic styles === */

body {
  font-family: var(--font-brand);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h1, h1 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h2, h2 {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h3, h3 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h4, h4 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h5, h5 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h6, h6 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.p, p {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.lead {
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.code, code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--gray-100);
  padding: 0.125em 0.375em;
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

.display {
  font-size: var(--fs-7xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--fg-1);
}