/* ============================================================
   JournalByTTS — Design Tokens
   Two themes: [data-theme="light"] and [data-theme="dark"]
   ============================================================ */

:root {
  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace;
  --font-serif: "Instrument Serif", "Times New Roman", serif;

  /* Type scale */
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base:15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;
  --text-5xl: 52px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* Spacing */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 56px; --s-16: 80px;

  /* Brand accent (single accent across both themes) */
  --ember-50:  #FFF1EC;
  --ember-100: #FFD9CC;
  --ember-200: #FFB39C;
  --ember-300: #FF8B6A;
  --ember-400: #F26D45;
  --ember-500: #E8552B;   /* PRIMARY */
  --ember-600: #C8401A;
  --ember-700: #9E3214;
  --ember-800: #6D220E;

  /* Semantic */
  --green-500: #2BAA6E;
  --green-600: #1F8A57;
  --red-500:   #E03E5A;
  --red-600:   #B82844;
  --amber-500: #D69A2C;
  --blue-500:  #3D7DDC;
  --violet-500:#7B5BD6;

  /* Phase colors (used for borders/badges of trading account cards) */
  --phase-1: #3D7DDC;
  --phase-2: #D69A2C;
  --phase-3: #7B5BD6;
  --phase-funded: #2BAA6E;
  --phase-failed: #E03E5A;

  /* Easings & motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 360ms;
}

/* ───────── LIGHT ───────── */
[data-theme="light"] {
  --bg:           #FAFAF7;     /* warm cream canvas */
  --bg-elev:     #FFFFFF;
  --bg-sunk:     #F2F1EC;
  --bg-hover:    #EFEEE9;

  --surface:     #FFFFFF;
  --surface-2:   #F7F6F1;

  --border:      #E5E3DC;
  --border-strong:#CFCCC2;
  --divider:     #ECEAE3;

  --ink:         #0E0E0C;      /* primary text */
  --ink-2:       #3A3A36;      /* secondary */
  --ink-3:       #6E6D67;      /* tertiary / labels */
  --ink-4:       #9C9A93;      /* placeholder / disabled */

  --accent:      var(--ember-500);
  --accent-hover:var(--ember-600);
  --accent-fg:   #FFFFFF;
  --accent-soft: var(--ember-50);
  --accent-soft-fg: var(--ember-700);

  --pos:         var(--green-600);
  --pos-soft:    #E5F4EC;
  --neg:         var(--red-600);
  --neg-soft:    #FCE6EA;
  --warn:        #B07A1F;
  --warn-soft:   #FAEFD8;

  --shadow-sm: 0 1px 2px rgba(14,14,12,.04), 0 1px 1px rgba(14,14,12,.03);
  --shadow-md: 0 2px 4px rgba(14,14,12,.04), 0 8px 24px rgba(14,14,12,.05);
  --shadow-lg: 0 12px 36px rgba(14,14,12,.08);

  /* Glass system — used by overlays/modals/popovers */
  --glass-bg:        color-mix(in oklch, white 76%, transparent);
  --glass-border:    color-mix(in oklch, var(--ink) 8%, transparent);
  --glass-highlight: rgba(255,255,255,.6);
  --glass-elev:      color-mix(in oklch, white 85%, transparent);
  --glass-sunk:      color-mix(in oklch, var(--bg-sunk) 72%, transparent);
  --glass-strong:    color-mix(in oklch, white 92%, transparent);
}

/* ───────── DARK ───────── */
[data-theme="dark"] {
  --bg:           #0B0C0E;     /* true coal, NOT navy */
  --bg-elev:     #131418;
  --bg-sunk:     #08080A;
  --bg-hover:    #1A1C21;

  --surface:     #131418;
  --surface-2:   #181A1F;

  --border:      #23262C;
  --border-strong:#34383F;
  --divider:     #1C1E23;

  --ink:         #ECECEA;
  --ink-2:       #B8B8B3;
  --ink-3:       #80807B;
  --ink-4:       #555550;

  --accent:      var(--ember-500);
  --accent-hover:var(--ember-400);
  --accent-fg:   #0B0C0E;
  --accent-soft: rgba(232,85,43,.12);
  --accent-soft-fg: #FFB39C;

  --pos:         #4BC58A;
  --pos-soft:    rgba(43,170,110,.12);
  --neg:         #F26079;
  --neg-soft:    rgba(224,62,90,.12);
  --warn:        #E0B050;
  --warn-soft:   rgba(214,154,44,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.6);

  /* Glass system — used by overlays/modals/popovers */
  --glass-bg:        color-mix(in oklch, #1a1c21 65%, transparent);
  --glass-border:    color-mix(in oklch, white 8%, transparent);
  --glass-highlight: rgba(255,255,255,.06);
  --glass-elev:      color-mix(in oklch, #20232a 70%, transparent);
  --glass-sunk:      color-mix(in oklch, #08080a 60%, transparent);
  --glass-strong:    color-mix(in oklch, #1a1c21 88%, transparent);
}