/* ============================================================
   MERION × shadcn — TOKEN BRIDGE
   Maps the shadcn/ui CSS-variable contract onto Merion brand values.
   Layers:
     [data-theme=light|dark]    → surface + foreground
     [data-neon=cyan|lime|...]  → brand accent (one per solution)
     [data-direction=soft|...]  → visual language (radius / borders / glow)
   ============================================================ */

@import url("merion-tokens.css");

:root {
  /* type — Figtree is the ONLY brand typeface, across everything */
  --ui-font: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ui-mono: var(--ui-font); /* no secondary face — keep Figtree, use tabular figures */

  /* default brand accent = cyan (overridden by [data-neon]) */
  --brand: #31A592;          /* on light */
  --brand-strong: #00FFD4;   /* on dark / glow */
  --brand-contrast: #FFFFFF; /* text on brand fill */

  /* base radius (overridden by [data-direction]) */
  --radius: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* focus glow toggle (off in soft/structural, on in glow direction) */
  --focus-glow: none;
  --active-glow: none;

  color-scheme: light;
}

/* ============================================================
   THEME — LIGHT (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --background: #FFFFFF;
  --foreground: #081A1F;

  --card: #FFFFFF;
  --card-foreground: #081A1F;

  --popover: #FFFFFF;
  --popover-foreground: #081A1F;

  --primary: #081A1F;
  --primary-foreground: #FFFFFF;

  --secondary: #ECF2F2;
  --secondary-foreground: #081A1F;

  --muted: #F4F8F8;
  --muted-foreground: rgba(8, 26, 31, 0.58);

  --accent: #ECF2F2;            /* subtle hover surface */
  --accent-foreground: #081A1F;

  --destructive: #ED145B;
  --destructive-foreground: #FFFFFF;
  --success: #1F8A5B;
  --warning: #C77A00;

  --border: #E2EAEA;
  --border-strong: rgba(8, 26, 31, 0.14);
  --input: #E2EAEA;
  --ring: var(--brand);

  --brand-contrast: #FFFFFF;
  --brand-tint: color-mix(in srgb, var(--brand) 10%, #FFFFFF);
  --brand-tint-border: color-mix(in srgb, var(--brand) 28%, #FFFFFF);

  --shadow: 0 1px 2px rgba(8,26,31,.05), 0 8px 24px rgba(8,26,31,.06);
  --shadow-sm: 0 1px 2px rgba(8,26,31,.06);
  color-scheme: light;
}

/* brand uses the deep teal value on light surfaces */
[data-theme="light"] { --brand-active: var(--brand); }

/* ============================================================
   THEME — DARK
   ============================================================ */
[data-theme="dark"] {
  --background: #081A1F;
  --foreground: #FFFFFF;

  --card: #0B2127;
  --card-foreground: #FFFFFF;

  --popover: #0C242B;
  --popover-foreground: #FFFFFF;

  --primary: var(--brand-strong);
  --primary-foreground: #081A1F;

  --secondary: #122E35;
  --secondary-foreground: #FFFFFF;

  --muted: #0E272E;
  --muted-foreground: rgba(255, 255, 255, 0.56);

  --accent: #122E35;
  --accent-foreground: #FFFFFF;

  --destructive: #FF3D7F;
  --destructive-foreground: #081A1F;
  --success: #00FFD4;
  --warning: #FFC24B;

  --border: #11343D;
  --border-strong: rgba(255, 255, 255, 0.18);
  --input: #173B44;
  --ring: var(--brand-strong);

  --brand: var(--brand-strong);   /* on dark, use the bright value */
  --brand-contrast: #081A1F;
  --brand-tint: color-mix(in srgb, var(--brand-strong) 16%, #081A1F);
  --brand-tint-border: color-mix(in srgb, var(--brand-strong) 38%, #081A1F);

  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

/* ============================================================
   NEON SOLUTION ACCENTS  — each solution gets its own brand color.
   "strong" = the on-dark bright value; the light value sits on white.
   ============================================================ */
[data-neon="cyan"]    { --brand: #31A592; --brand-strong: #00FFD4; }
[data-neon="lime"]    { --brand: #829C00; --brand-strong: #D4FF00; }
[data-neon="pink"]    { --brand: #ED145B; --brand-strong: #FF2E78; }
[data-neon="violet"]  { --brand: #5F37FF; --brand-strong: #7C5CFF; }
[data-neon="magenta"] { --brand: #C400C4; --brand-strong: #FF00FF; }
[data-neon="orange"]  { --brand: #C77A00; --brand-strong: #FF8C00; }

/* keep dark theme pointing --brand at the strong value after neon swap */
[data-theme="dark"][data-neon="cyan"]    { --brand: #00FFD4; }
[data-theme="dark"][data-neon="lime"]    { --brand: #D4FF00; }
[data-theme="dark"][data-neon="pink"]    { --brand: #FF2E78; }
[data-theme="dark"][data-neon="violet"]  { --brand: #7C5CFF; }
[data-theme="dark"][data-neon="magenta"] { --brand: #FF00FF; }
[data-theme="dark"][data-neon="orange"]  { --brand: #FF8C00; }

/* lime is light → needs dark text on its fill even in dark theme */
[data-neon="lime"]    { --brand-contrast: #081A1F; }
[data-theme="dark"][data-neon="lime"] { --primary-foreground: #081A1F; }
[data-theme="dark"][data-neon="cyan"] { --primary-foreground: #081A1F; }
[data-theme="dark"][data-neon="pink"],
[data-theme="dark"][data-neon="violet"],
[data-theme="dark"][data-neon="magenta"],
[data-theme="dark"][data-neon="orange"] { --primary-foreground: #FFFFFF; --brand-contrast: #FFFFFF; }

/* ============================================================
   DIRECTIONS — three visual languages to compare
   ============================================================ */

/* 1 · SOFT (default) — Merion soft radius, hairline borders, flat */
[data-direction="soft"] {
  --radius: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --border-weight: 1px;
  --focus-glow: none;
  --active-glow: none;
  --surface-tint: var(--card);
}

/* 2 · STRUCTURAL — near-square, stronger borders, technical/mono labels */
[data-direction="structural"] {
  --radius: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 4px;
  --border-weight: 1.5px;
  --focus-glow: none;
  --active-glow: none;
  --border: var(--border-strong);
  --surface-tint: var(--card);
}
[data-direction="structural"] .ui-label,
[data-direction="structural"] .ds-kicker { font-family: var(--ui-mono); letter-spacing: .12em; }

/* 3 · GLOW — dark-forward, cyan glow on focus + active, more presence */
[data-direction="glow"] {
  --radius: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px;
  --border-weight: 1px;
  --focus-glow: 0 0 0 1px var(--brand), 0 0 18px color-mix(in srgb, var(--brand) 55%, transparent);
  --active-glow: 0 0 24px color-mix(in srgb, var(--brand) 45%, transparent);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--ui-font); background: var(--background); color: var(--foreground); -webkit-font-smoothing: antialiased; }

.ds-kicker {
  font-size: 12px; font-weight: 500; letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--brand);
}
.mono { font-family: var(--ui-font); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: .01em; }