/* Design tokens — single source of truth for palette, typography, spacing.
   Consumed by app.css, viewer.css, and chart_theme.js (via getComputedStyle).
   Never inline these values; always reference --token-name.

   Palette: turquoise/teal background with dark cards (mock-aligned).
*/

@font-face {
  font-family: 'Inter';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/inter/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/inter/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/inter/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/inter/inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/cormorant/cormorant-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/cormorant/cormorant-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/static/vendor/cormorant/cormorant-700.woff2') format('woff2');
}

:root {
  /* Background (turquoise) */
  --bg:            #7DC4B0;
  --bg-2:          #6FB8A4;       /* hover/scroll-track */
  --bg-strong:     #62AD99;       /* footer or strong divider */

  /* Subtle white noise overlay applied to body via background-image. */
  --bg-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  /* Surfaces (dark cards on turquoise BG) */
  --surface-1:     #0e1a1d;
  --surface-2:     #18272a;
  --surface-3:     #213437;
  --surface-4:     #2a4046;

  /* Borders */
  --border:           rgba(0, 0, 0, 0.12);         /* subtle on turquoise BG */
  --border-strong:    rgba(0, 0, 0, 0.22);
  --card-border:      #1e3036;                     /* on dark cards */
  --card-border-strong: #2a4046;

  /* Text on turquoise BG (dark-on-light) */
  --text:          #0a1418;
  --text-dim:      #1d3640;
  --muted:         #34555c;

  /* Text inside dark cards */
  --card-text:        #e6f2f4;
  --card-text-dim:    #9bb6bd;
  --card-muted:       #6b8a92;

  /* Accent — gold, contrasts with both turquoise and dark surfaces */
  --accent:        #d4a017;
  --accent-hover:  #f0bb33;
  --accent-press:  #b8841a;
  --accent-fg:     #0a1418;
  --accent-soft:   rgba(212, 160, 23, 0.20);
  --accent-ring:   rgba(212, 160, 23, 0.35);

  /* Secondary accent — turquoise-cyan, used on dark cards (chips, KPI labels) */
  --teal:          #5eead4;
  --teal-soft:     rgba(94, 234, 212, 0.20);

  /* Semantic */
  --danger:        #ef4444;
  --warn:          #f59e0b;
  --ok:            #10b981;
  --info:          #3b82f6;

  /* Chart palette — saturated for contrast on dark card surfaces */
  --chart-1: #5eead4;   /* turquesa */
  --chart-2: #f5b942;   /* gold */
  --chart-3: #ef4444;   /* rojo */
  --chart-4: #34d399;   /* verde */
  --chart-5: #60a5fa;   /* azul */
  --chart-6: #f472b6;   /* rosa */
  --chart-7: #c084fc;   /* violeta */
  --chart-8: #94a3b8;   /* gris */

  /* Typography */
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'Cascadia Mono', 'JetBrains Mono', monospace;

  --fs-xs:   0.72rem;
  --fs-sm:   0.82rem;
  --fs-base: 0.95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.6rem;
  --fs-2xl:  2.2rem;
  --fs-3xl:  3rem;

  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.18em;
  --tracking-widest: 0.32em;

  --lh-tight: 1.1;
  --lh-base:  1.5;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.36);

  /* Transition */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Body background: solid navy + faint white noise overlay. The noise SVG is
   declared as --bg-noise so we can compose layered backgrounds without
   re-encoding the data URI in multiple places. */
html, body {
  background-color: var(--bg);
  background-image: var(--bg-noise);
  background-repeat: repeat;
  color: var(--text);
}