/* ==========================================================================
   DOSE — Design Tokens
   Source of truth: Figma Color-Palette + Projects/App/Sources/Views/DesignSystem.swift
   Dark mode is canonical. Light mode is inverted-warm (cream/espresso).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500;700&display=swap");

:root {
  /* ---------- Brand ---------- */
  --dose-gold:        #C9A962;   /* accent/primary — distinctive DOSE brand color */
  --dose-gold-soft:   rgba(201,169,98,0.12);
  --dose-gold-end:    #8B7845;
  --dose-cream:       #F5F5F0;
  --dose-espresso:    #3C3026;
  --dose-coffee:      #6B4A24;
  --dose-ink:         #0D0D0E;   /* app canvas dark */

  /* ---------- Dark (default) semantic ---------- */
  --bg-canvas:        #13110E;   /* result surface — warm ink */
  --bg-canvas-alt:    #1A1610;   /* gradient end */
  --bg-card:          #18181B;   /* shadcn-ink card */
  --bg-control:       #1E1C19;   /* 30,28,25 */
  --bg-elevated:      #2A2826;
  --bg-muted:         #241F1A;

  --text-primary:     #F5F5F0;
  --text-secondary:   #8E877C;
  --text-tertiary:    #6B655B;
  --text-muted:       #A1A1AA;
  --text-subtle:      #71717A;
  --text-on-accent:   #1A1610;

  --border-primary:   #3A3836;
  --border-muted:     rgba(255,255,255,0.125);

  /* ---------- Accents ---------- */
  --accent-primary:   #C9A962;   /* gold */
  --accent-secondary: #859B74;   /* sage — tracking-green */
  --accent-coffee:    #6B4A24;

  /* ---------- Status ---------- */
  --status-success:   #859B74;
  --status-warning:   #D65C52;
  --status-warning-soft: rgba(214,92,82,0.14);
  --status-warning-stroke: rgba(214,92,82,0.40);
  --status-error:     #EF4444;
  --status-info:      #3B82F6;
  --status-amber:     #F59E0B;

  /* ---------- Charts ---------- */
  --chart-1: #22C55E;
  --chart-2: #3B82F6;
  --chart-3: #A855F7;
  --chart-4: #F59E0B;
  --chart-5: #EF4444;

  /* ---------- Glass / scrim ---------- */
  --glass-fill:       rgba(255,255,255,0.10);
  --glass-fill-soft:  rgba(255,255,255,0.06);
  --glass-fill-04:    rgba(255,255,255,0.04);
  --glass-stroke:     rgba(255,255,255,0.22);
  --glass-stroke-20:  rgba(255,255,255,0.20);
  --scrim-capture:    rgba(0,0,0,0.67);

  /* ---------- Gradients ---------- */
  --gradient-dark:    linear-gradient(180deg, #13110E 0%, #1A1610 100%);
  --gradient-dark-alt:linear-gradient(180deg, #0F0D0A 0%, #1C1712 100%);
  --gradient-light:   linear-gradient(180deg, #FFF8EC 0%, #EFD8B8 100%);
  --gradient-gold:    linear-gradient(180deg, #C9A962 0%, #8B7845 100%);
  --gradient-depth:   linear-gradient(90deg, #2A6FA8 0%, #3A875A 50%, #9F6B2C 100%);

  /* ---------- Type (raw tokens) ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Rounded", "SF Pro Text", sans-serif;
  --font-rounded: "Inter", -apple-system, "SF Pro Rounded", "SF Pro Display", system-ui, sans-serif; /* SwiftUI .rounded substitute */
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — lifted from DesignSystem.swift CGTypography */
  --fs-large-title:   32px;   /* 32pt bold rounded */
  --fs-title:         24px;   /* 24pt semibold rounded */
  --fs-headline:      18px;   /* 18pt semibold rounded */
  --fs-body:          16px;
  --fs-callout:       15px;
  --fs-caption:       14px;
  --fs-mono:          14px;
  --fs-mono-large:    28px;
  --fs-micro:         11px;   /* badge/chip */
  --fs-eyebrow:        9px;   /* section labels */

  --tracking-eyebrow: 1.5px;
  --tracking-brand:   2px;    /* DOSE wordmark */

  /* ---------- Spacing / radii / shadow ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  --radius-sm: 6px;
  --radius-md: 10px;    /* buttons */
  --radius-lg: 14px;    /* cards */
  --radius-xl: 18px;    /* image preview */
  --radius-2xl: 24px;   /* containers */
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.16);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-gold: 0 0 0 4px rgba(201,169,98,0.18);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-med:  220ms;
  --dur-slow: 320ms;
}

/* ---------- Light mode (cream) ---------- */
[data-theme="light"],
:root.light {
  --bg-canvas:     #FCF5EA;
  --bg-canvas-alt: #EFD8B8;
  --bg-card:       #FFF8EE;
  --bg-control:    #F5EBDD;
  --bg-elevated:   #FFF8EE;
  --bg-muted:      #FFF7EC;

  --text-primary:   #3C3026;
  --text-secondary: #7D6955;
  --text-tertiary:  #9B846B;
  --text-muted:     #8D7B61;
  --text-on-accent: #1A1610;

  --border-primary: #D8C3A8;
  --border-muted:   rgba(60,48,38,0.18);

  --accent-primary: #B9892E;  /* deeper gold in light mode */

  --glass-fill:     rgba(60,48,38,0.06);
  --glass-stroke:   rgba(60,48,38,0.18);
}

/* ==========================================================================
   Semantic element styles
   ========================================================================== */

html, body { background: var(--bg-canvas); color: var(--text-primary); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-rounded);
  font-size: var(--fs-large-title);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

h2, .h2 {
  font-family: var(--font-rounded);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

h3, .h3 {
  font-family: var(--font-rounded);
  font-size: var(--fs-headline);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text-primary);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  text-wrap: pretty;
}

.callout {
  font-size: var(--fs-callout);
  font-weight: 500;
  color: var(--text-primary);
}

.caption {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.wordmark {
  font-family: var(--font-rounded);
  font-weight: 700;
  letter-spacing: var(--tracking-brand);
  color: var(--text-primary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-primary);
}

.mono-lg {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-large);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* brand gold utility */
.gold { color: var(--accent-primary); }