/* FunLearn — Design tokens
   Single source of truth: colors, type, spacing, radii, shadows, motion. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,300..900,30..100&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ───── Type families ───── */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Menlo', monospace;

  /* Fraunces is variable — these tune the look toward editorial */
  --display-opsz: 144;
  --display-soft: 50;

  /* ───── Type scale (iPhone-tuned, 393 width baseline) ───── */
  --t-display-xl: 56px;   --t-display-xl-lh: 1.02; --t-display-xl-tr: -0.022em;
  --t-display-l:  40px;   --t-display-l-lh:  1.05; --t-display-l-tr:  -0.020em;
  --t-display-m:  28px;   --t-display-m-lh:  1.10; --t-display-m-tr:  -0.018em;
  --t-title:      22px;   --t-title-lh:      1.18; --t-title-tr:      -0.014em;
  --t-headline:   17px;   --t-headline-lh:   1.30; --t-headline-tr:   -0.008em;
  --t-body:       15px;   --t-body-lh:       1.45; --t-body-tr:        0;
  --t-caption:    13px;   --t-caption-lh:    1.40; --t-caption-tr:     0;
  --t-micro:      11px;   --t-micro-lh:      1.30; --t-micro-tr:       0.06em;

  /* ───── Spacing (4-based) ───── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px;

  /* ───── Radii ───── */
  --r-xs: 6px; --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ───── Motion ───── */
  --ease-spring: linear(0, 0.0085 1.6%, 0.0339 3.3%, 0.1359 6.7%, 0.3025 10.2%, 0.5275 13.8%, 0.7975 17.7%, 1.103 21.8%, 1.205 23.9%, 1.286 26.2%, 1.343 28.5%, 1.374 30.9%, 1.378 33.4%, 1.356 36%, 1.31 38.7%, 1.243 41.6%, 1.071 47.7%, 0.918 53.9%, 0.836 57.4%, 0.835 60.5%, 0.866 63.7%, 0.97 70.3%, 1.011 73.6%, 1.032 77.1%, 1.038 80.7%, 1.028 84.6%, 0.996 92.4%, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
  --dur-5: 760ms;

  /* ───── Light mode (default) ───── */
  --bg-canvas:    #FBF7F0;             /* warm near-white */
  --bg-canvas-2:  #F4EFE4;
  --bg-surface:   #FFFFFF;
  --bg-elevated:  #FFFFFF;
  --bg-subtle:    rgba(15,17,21,0.04);
  --bg-inset:     rgba(15,17,21,0.06);
  --bg-overlay:   rgba(15,17,21,0.40);
  --bg-glass:     rgba(255,255,255,0.66);
  --bg-glass-stroke: rgba(255,255,255,0.85);

  --text-primary:    #0E1116;
  --text-secondary:  #4B4F59;
  --text-tertiary:   #8A8E98;
  --text-on-accent:  #FFFFFF;
  --text-inverse:    #FBF7F0;

  --border-hair:   rgba(15,17,21,0.06);
  --border:        rgba(15,17,21,0.10);
  --border-strong: rgba(15,17,21,0.18);

  --shadow-1: 0 1px 2px rgba(15,17,21,0.04), 0 1px 1px rgba(15,17,21,0.02);
  --shadow-2: 0 4px 12px rgba(15,17,21,0.06), 0 1px 2px rgba(15,17,21,0.04);
  --shadow-3: 0 12px 32px rgba(15,17,21,0.10), 0 4px 8px rgba(15,17,21,0.05);
  --shadow-4: 0 24px 64px rgba(15,17,21,0.14), 0 8px 16px rgba(15,17,21,0.06);
  --shadow-accent: 0 12px 32px var(--accent-glow, rgba(45,82,255,0.18));

  /* ───── Per-category accents (defaults to Philosophy) ───── */
  --philosophy:        #2D52FF;
  --philosophy-soft:   #E5EBFF;
  --philosophy-deep:   #1A2F99;
  --philosophy-glow:   rgba(45, 82, 255, 0.28);

  --history:           #E07A0F;
  --history-soft:      #FCEBD2;
  --history-deep:      #7A3E00;
  --history-glow:      rgba(224, 122, 15, 0.26);

  --finance:           #00C167;
  --finance-soft:      #DBF7E7;
  --finance-deep:      #00643A;
  --finance-glow:      rgba(0, 193, 103, 0.26);

  --languages:         #E26D4C;          /* Spanish terracotta */
  --languages-soft:    #FBE2D6;
  --languages-deep:    #8A3819;
  --languages-glow:    rgba(226, 109, 76, 0.26);
  --languages-2:       #1B4F8C;          /* ocean blue */
  --languages-3:       #F4CC3E;          /* lemon yellow */

  --theology:          #B81E48;
  --theology-soft:     #F8DBE3;
  --theology-deep:     #5C0A21;
  --theology-glow:     rgba(184, 30, 72, 0.26);

  /* Status */
  --success: #00C167;
  --warning: #F0A020;
  --danger:  #E5384A;
  --info:    #2D52FF;

  /* Active accent (overridden per category) */
  --accent:       var(--philosophy);
  --accent-soft:  var(--philosophy-soft);
  --accent-deep:  var(--philosophy-deep);
  --accent-glow:  var(--philosophy-glow);
}

/* ───── Dark mode ───── */
[data-theme="dark"] {
  --bg-canvas:    #0B0E17;             /* deep cool charcoal-navy */
  --bg-canvas-2:  #0F1320;
  --bg-surface:   #161B2A;
  --bg-elevated:  #1D2336;
  --bg-subtle:    rgba(255,255,255,0.04);
  --bg-inset:     rgba(0,0,0,0.30);
  --bg-overlay:   rgba(5,7,12,0.60);
  --bg-glass:     rgba(22,27,42,0.66);
  --bg-glass-stroke: rgba(255,255,255,0.08);

  --text-primary:    #F2EEE5;
  --text-secondary:  #A6AAB6;
  --text-tertiary:   #6A6E7C;
  --text-on-accent:  #FFFFFF;
  --text-inverse:    #0E1116;

  --border-hair:   rgba(255,255,255,0.06);
  --border:        rgba(255,255,255,0.10);
  --border-strong: rgba(255,255,255,0.18);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-3: 0 14px 36px rgba(0,0,0,0.50), 0 4px 10px rgba(0,0,0,0.35);
  --shadow-4: 0 28px 72px rgba(0,0,0,0.60), 0 8px 20px rgba(0,0,0,0.40);

  /* Accents shift slightly brighter on dark */
  --philosophy:      #5C7DFF;
  --philosophy-soft: #1B2547;
  --philosophy-deep: #BFCEFF;
  --philosophy-glow: rgba(92, 125, 255, 0.42);

  --history:         #F59B14;
  --history-soft:    #3A2611;
  --history-deep:    #FBD58A;
  --history-glow:    rgba(245, 155, 20, 0.40);

  --finance:         #2EE38C;
  --finance-soft:    #0E2A1E;
  --finance-deep:    #B6F7D5;
  --finance-glow:    rgba(46, 227, 140, 0.40);

  --languages:       #FF8A66;
  --languages-soft:  #3A1A10;
  --languages-deep:  #FCC2A6;
  --languages-glow:  rgba(255, 138, 102, 0.40);
  --languages-2:     #4D8FD6;
  --languages-3:     #FFDD5C;

  --theology:        #E84267;
  --theology-soft:   #3A0E1B;
  --theology-deep:   #FBB7C5;
  --theology-glow:   rgba(232, 66, 103, 0.40);
}

/* ───── Category accent setters ───── */
[data-accent="philosophy"] { --accent: var(--philosophy); --accent-soft: var(--philosophy-soft); --accent-deep: var(--philosophy-deep); --accent-glow: var(--philosophy-glow); }
[data-accent="history"]    { --accent: var(--history);    --accent-soft: var(--history-soft);    --accent-deep: var(--history-deep);    --accent-glow: var(--history-glow); }
[data-accent="finance"]    { --accent: var(--finance);    --accent-soft: var(--finance-soft);    --accent-deep: var(--finance-deep);    --accent-glow: var(--finance-glow); }
[data-accent="languages"]  { --accent: var(--languages);  --accent-soft: var(--languages-soft);  --accent-deep: var(--languages-deep);  --accent-glow: var(--languages-glow); }
[data-accent="theology"]   { --accent: var(--theology);   --accent-soft: var(--theology-soft);   --accent-deep: var(--theology-deep);   --accent-glow: var(--theology-glow); }

/* ───── Globals ───── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}

/* Type primitives */
.display-xl, .display-l, .display-m {
  font-family: var(--font-display);
  font-variation-settings: "opsz" var(--display-opsz), "SOFT" var(--display-soft);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.display-xl { font-size: var(--t-display-xl); line-height: var(--t-display-xl-lh); letter-spacing: var(--t-display-xl-tr); }
.display-l  { font-size: var(--t-display-l);  line-height: var(--t-display-l-lh);  letter-spacing: var(--t-display-l-tr); }
.display-m  { font-size: var(--t-display-m);  line-height: var(--t-display-m-lh);  letter-spacing: var(--t-display-m-tr); }

.title    { font-family: var(--font-ui); font-size: var(--t-title); line-height: var(--t-title-lh); letter-spacing: var(--t-title-tr); font-weight: 600; }
.headline { font-family: var(--font-ui); font-size: var(--t-headline); line-height: var(--t-headline-lh); letter-spacing: var(--t-headline-tr); font-weight: 600; }
.body     { font-family: var(--font-ui); font-size: var(--t-body); line-height: var(--t-body-lh); font-weight: 400; }
.caption  { font-family: var(--font-ui); font-size: var(--t-caption); line-height: var(--t-caption-lh); font-weight: 500; color: var(--text-secondary); }
.micro    { font-family: var(--font-ui); font-size: var(--t-micro); line-height: var(--t-micro-lh); letter-spacing: var(--t-micro-tr); font-weight: 600; text-transform: uppercase; color: var(--text-tertiary); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

::selection { background: var(--accent); color: var(--text-on-accent); }