/* Sampoorna — design tokens for 3 aesthetic directions
   Switched via [data-aesthetic="..."] on the app root. */

/* ============================================================
   BASE — universal layout primitives (don't change per aesthetic)
   ============================================================ */

:root {
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.10), 0 4px 10px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 30px 60px rgba(15, 23, 42, 0.14);

  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 400ms;
  --ease:     cubic-bezier(.2, .8, .2, 1);

  /* density — multiplied by tweak */
  --density: 1;
  --pad-card:    calc(20px * var(--density));
  --pad-section: calc(28px * var(--density));
  --gap-card:    calc(20px * var(--density));
  --gap-row:     calc(14px * var(--density));

  /* universal semantic colors (mostly aesthetic-controlled, but defaults below) */
  --c-emerald: #16a34a;
  --c-azure:   #2563eb;
  --c-amber:   #d97706;
  --c-coral:   #ea580c;
  --c-violet:  #7c3aed;
  --c-rose:    #e11d48;
}

/* ============================================================
   AESTHETIC 1: EDITORIAL TRUST  (default)
   Refined serif display + Inter body, navy + warm cream
   Feels like the Financial Times / a research firm
   ============================================================ */

[data-aesthetic="editorial"] {
  --bg:         #f6f4ef;
  --bg-deep:    #ebe7dc;
  --surface:    #ffffff;
  --surface-2:  #f0ede4;
  --ink:        #14191b;
  --ink-2:      #3d4348;
  --ink-3:      #757a7f;
  --ink-mute:   #a5a9ad;
  --line:       #d8d3c3;
  --line-soft:  #e8e4d6;
  --brand:      #2d6a4f;
  --brand-soft: #3e8c69;
  --brand-pale: #9bc3aa;
  --accent:     #b8593a;
  --accent-soft:#e8c9b4;
  --gold:       #a47e3b;

  /* charts */
  --c-emerald:  #2d6a4f;
  --c-azure:    #2b4f8a;
  --c-amber:    #b58423;
  --c-coral:    #b8593a;
  --c-violet:   #6b4a8a;
  --c-mute-2:   #b8b3a0;

  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --headline-tracking: -0.02em;
  --headline-weight:   500;
  --body-weight:       400;
}

/* ============================================================
   AESTHETIC 2: SAMPOORNA HERITAGE
   Earthy palette, deep teal, saffron accent, rooted-Indian
   ============================================================ */

[data-aesthetic="heritage"] {
  --bg:         #f5ecdb;
  --bg-deep:    #e8d9bc;
  --surface:    #fdf6e7;
  --surface-2:  #efe2ca;
  --ink:        #2a1e15;
  --ink-2:      #5b463a;
  --ink-3:      #88735f;
  --ink-mute:   #b3a08a;
  --line:       #d4be97;
  --line-soft:  #e2d2ad;
  --brand:      #0e514a;        /* deep teal */
  --brand-soft: #1a6f64;
  --brand-pale: #8db5a9;
  --accent:     #c8541d;        /* saffron */
  --accent-soft:#f0c9a8;
  --gold:       #b88a2c;

  --c-emerald:  #2c6b50;
  --c-azure:    #1b5466;
  --c-amber:    #c8541d;
  --c-coral:    #b8401a;
  --c-violet:   #6e3a5a;
  --c-mute-2:   #c4ab84;

  --font-display: "Fraunces", "Cormorant Garamond", "Source Serif 4", Georgia, serif;
  --font-body:    "DM Sans", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;

  --headline-tracking: -0.015em;
  --headline-weight:   500;
  --body-weight:       400;
}

/* ============================================================
   AESTHETIC 3: DATA CONSOLE
   Dense, near-black & off-white, electric mint accent
   Linear / Stripe / Bloomberg terminal precision
   ============================================================ */

[data-aesthetic="console"] {
  --bg:         #0e1116;
  --bg-deep:    #080a0e;
  --surface:    #161a22;
  --surface-2:  #1d222c;
  --ink:        #f0f2f5;
  --ink-2:      #b8bec9;
  --ink-3:      #7a8290;
  --ink-mute:   #4d5462;
  --line:       #262c38;
  --line-soft:  #1e232d;
  --brand:      #5eead4;        /* electric mint */
  --brand-soft: #2dd4bf;
  --brand-pale: #2dd4bf;
  --accent:     #fb923c;        /* signal orange */
  --accent-soft:#7a3a18;
  --gold:       #fcd34d;

  --c-emerald:  #34d399;
  --c-azure:    #60a5fa;
  --c-amber:    #fbbf24;
  --c-coral:    #fb923c;
  --c-violet:   #a78bfa;
  --c-mute-2:   #4a5060;

  --font-display: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --headline-tracking: -0.01em;
  --headline-weight:   500;
  --body-weight:       400;
}

/* ============================================================
   GLOBAL RESETS / BASE TYPOGRAPHY
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-weight: var(--body-weight);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--brand); color: var(--bg); }

/* H styles — uses display font */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-tracking);
  margin: 0;
  color: var(--ink);
}
h1 { font-size: 44px; line-height: 1.06; }
h2 { font-size: 30px; line-height: 1.15; }
h3 { font-size: 22px; line-height: 1.25; }
h4 { font-size: 17px; line-height: 1.35; font-weight: 600; }

/* utility classes — sparingly */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum", "zero"; }
.ui   { font-family: var(--font-body); }

/* ============================================================
   SHARED COMPONENT STYLES
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--pad-card);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--ink-3); }
.card.interactive:hover { box-shadow: var(--shadow-md); }

.divider { height: 1px; background: var(--line); border: none; margin: 0; }

.kbd {
  display: inline-flex; align-items: center; padding: 1px 6px;
  font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--brand); color: var(--bg); }
.btn-primary:hover { background: var(--brand-soft); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink-2); background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn-accent { background: var(--accent); color: white; }
.btn-accent:hover { filter: brightness(1.05); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 14px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* Pills + Badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.pill-strong { background: var(--brand); color: var(--bg); border-color: transparent; }
.pill-tier-gold   { background: rgba(164,126,59,.12); color: var(--gold);    border-color: rgba(164,126,59,.3); }
.pill-tier-silver { background: var(--surface-2); color: var(--ink-2); }
.pill-tier-bronze { background: var(--surface-2); color: var(--ink-3); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--r-pill);
}
.badge-dna     { background: rgba(45,122,77,.12);  color: var(--c-emerald); }
.badge-geo     { background: rgba(43,79,138,.12);  color: var(--c-azure);   }
.badge-peer    { background: rgba(181,132,35,.12); color: var(--c-amber);   }
.badge-blue    { background: rgba(107,74,138,.14); color: var(--c-violet);  }
.badge-missing { background: rgba(184,89,58,.14);  color: var(--c-coral);   }

/* Inputs */
.input {
  height: 44px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease);
  width: 100%;
}
.input:focus { outline: none; border-color: var(--brand); }
.input::placeholder { color: var(--ink-mute); }
.label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* Section eyebrow used throughout */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 22px; height: 1px; background: currentColor;
}

/* Score bars used in Brief */
.score-bar {
  height: 6px; width: 100%;
  background: var(--line-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  position: relative;
}
.score-bar > span {
  display: block; height: 100%;
  background: var(--brand);
  border-radius: var(--r-pill);
  transition: width var(--dur-slow) var(--ease);
}
.score-bar.tone-strong   > span { background: var(--c-emerald); }
.score-bar.tone-moderate > span { background: var(--c-amber);   }
.score-bar.tone-weak     > span { background: var(--c-rose);    }

/* Locked section overlay */
.locked-wrap { position: relative; }
.locked-content { filter: blur(4px) saturate(.6); pointer-events: none; user-select: none; opacity: 0.5; }
.locked-veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, transparent, var(--surface) 30%);
  border-radius: var(--r-md);
}

/* tabular numbers everywhere we show metrics */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Focused outline */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbars (console aesthetic dark) */
[data-aesthetic="console"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-aesthetic="console"] ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
[data-aesthetic="console"] ::-webkit-scrollbar-track { background: transparent; }

/* small util */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; }
.spacer { flex: 1; }
.grid { display: grid; gap: var(--gap-card); }

/* Tweak panel overrides (the panel itself doesn't pick up our tokens by default) */
[data-aesthetic] .tweak-panel,
[data-aesthetic] .__tweaks-panel { color: var(--ink); }