/* JustiXia design tokens — single source of truth.
   Light theme is default. data-theme="dark" overrides. */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --primary:           #0E7C66;
  --primary-hover:     #0A5E4D;
  --primary-soft:      #E5F2EE;   /* tinted bg, e.g. badges */
  --primary-on:        #FFFFFF;   /* text on primary */

  --secondary:         #FF2D78;   /* rose, flat — accents only, NEVER as gradient */
  --secondary-hover:   #E81E68;
  --secondary-soft:    #FFE8EF;
  --secondary-on:      #FFFFFF;

  /* ── Surfaces ──────────────────────────────────────────── */
  --bg:                #FAFAF7;
  --surface:           #FFFFFF;
  --surface-2:         #F4F4EE;   /* slightly recessed */
  --surface-elev:      #FFFFFF;   /* cards above bg */
  --surface-inverted:  #14201E;   /* dark feature band (kept dark in both themes) */
  --on-inverted:       #FFFFFF;   /* text on inverted surface */
  --on-inverted-muted: #B7C2C0;

  /* ── Text ──────────────────────────────────────────────── */
  --text:              #1A2B2E;
  --text-muted:        #5F6B6E;
  --text-subtle:       #8A9396;
  --text-on-dark:      #FFFFFF;

  /* ── Lines ─────────────────────────────────────────────── */
  --border:            #E5E7EB;
  --border-strong:     #C9CDD3;
  --divider:           #EFEFEA;

  /* ── Status ────────────────────────────────────────────── */
  --success:           #15803D;
  --success-soft:      #E6F4EA;
  --warning:           #B45309;
  --warning-soft:      #FDF3E2;
  --danger:            #B91C1C;
  --danger-soft:       #FCE8E8;
  --info:              #1D5A8C;
  --info-soft:         #E5EEF6;

  /* ── Focus ─────────────────────────────────────────────── */
  --focus-ring:        0 0 0 3px rgba(14, 124, 102, 0.30);

  /* ── Type ──────────────────────────────────────────────── */
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:        'Fraunces', Georgia, 'Times New Roman', serif;
  --font-mono:         ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;

  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* ── Spacing (4-based) ─────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* ── Radii ─────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-pill: 9999px;

  /* ── Shadows (neutral, never colored) ──────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 25, 0.04);
  --shadow-md: 0 2px 12px rgba(15, 23, 25, 0.06);
  --shadow-lg: 0 8px 28px rgba(15, 23, 25, 0.10);

  /* ── Layout ────────────────────────────────────────────── */
  --container-max: 1200px;
  --container-px:  var(--sp-6);
  --nav-h:         68px;

  /* ── Motion ────────────────────────────────────────────── */
  --t-fast:   120ms;
  --t-base:   200ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark theme ──────────────────────────────────────────── */
:root[data-theme="dark"] {
  --primary:           #5FB8A2;
  --primary-hover:     #7AC9B5;
  --primary-soft:      #18302B;
  --primary-on:        #0A1F1A;

  --secondary:         #FF5C92;
  --secondary-hover:   #FF7AA6;
  --secondary-soft:    #3A1626;
  --secondary-on:      #1A0810;

  --bg:                #0E1514;
  --surface:           #151D1B;
  --surface-2:         #19211F;
  --surface-elev:      #1D2724;
  --surface-inverted:  #060A09;
  --on-inverted:       #E8EDEB;
  --on-inverted-muted: #94A0A4;

  --text:              #E8EDEB;
  --text-muted:        #A4AEB1;
  --text-subtle:       #6F797C;

  --border:            #26322F;
  --border-strong:     #3A4844;
  --divider:           #1F2826;

  --success:           #4ADE80;
  --success-soft:      #102C1B;
  --warning:           #FBBF24;
  --warning-soft:      #2C2110;
  --danger:            #F87171;
  --danger-soft:       #2C1414;
  --info:              #7CB1E0;
  --info-soft:         #102230;

  --focus-ring:        0 0 0 3px rgba(95, 184, 162, 0.40);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
}

/* Auto dark when user hasn't explicitly chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --primary:           #5FB8A2;
    --primary-hover:     #7AC9B5;
    --primary-soft:      #18302B;
    --primary-on:        #0A1F1A;

    --secondary:         #FF5C92;
    --secondary-hover:   #FF7AA6;
    --secondary-soft:    #3A1626;
    --secondary-on:      #1A0810;

    --bg:                #0E1514;
    --surface:           #151D1B;
    --surface-2:         #19211F;
    --surface-elev:      #1D2724;
    --surface-inverted:  #060A09;
    --on-inverted:       #E8EDEB;
    --on-inverted-muted: #94A0A4;

    --text:              #E8EDEB;
    --text-muted:        #A4AEB1;
    --text-subtle:       #6F797C;

    --border:            #26322F;
    --border-strong:     #3A4844;
    --divider:           #1F2826;

    --success:           #4ADE80;
    --success-soft:      #102C1B;
    --warning:           #FBBF24;
    --warning-soft:      #2C2110;
    --danger:            #F87171;
    --danger-soft:       #2C1414;
    --info:              #7CB1E0;
    --info-soft:         #102230;

    --focus-ring:        0 0 0 3px rgba(95, 184, 162, 0.40);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

/* ── Reset + base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: light dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-normal);
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: var(--fw-medium); }

p { color: var(--text); }

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
a:hover { color: var(--primary-hover); }

::selection {
  background: var(--primary-soft);
  color: var(--text);
}

img, svg { display: block; max-width: 100%; }

button { font-family: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ── Container ───────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px);
}

@media (max-width: 640px) {
  :root { --container-px: var(--sp-4); }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
}

/* ── Utility ─────────────────────────────────────────────── */
.text-muted    { color: var(--text-muted); }
.text-subtle   { color: var(--text-subtle); }
.text-center   { text-align: center; }
.serif         { font-family: var(--font-serif); }
.sans          { font-family: var(--font-sans); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}