/* ============================================================
   lingobit — Colors & Type
   Pastel refresh of the app's blue/orange palette.
   Import as:  <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* -------- Web fonts (Google Fonts CDN — fonts/ folder reserved for self-host) -------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..700,0..100&family=Inter:wght@400;500;600;700;800&display=swap');

/* -------- Light theme (default) -------- */
:root {
  /* Surfaces — warm off-whites, not pure white */
  --bg:              #FAFAF7;
  --surface:         #FFFFFF;
  --surface-2:       #F4F2ED;   /* section tint, resting chip */
  --surface-3:       #EBE8E1;   /* pressed/hover container */
  --overlay:         rgba(15, 15, 18, 0.40);

  /* Pastel brand — periwinkle (evolves #265EBB) */
  --primary:         #B8C5F2;
  --primary-strong:  #8FA3E6;   /* on-primary text, pressed */
  --primary-soft:    #E5EAFB;   /* tints, container fills */
  --primary-ink:     #2D3C7A;   /* text on --primary-soft */

  /* Pastel accent — apricot (evolves #F6813F) */
  --accent:          #F9C6B0;
  --accent-strong:   #F1A383;
  --accent-soft:     #FDEDE3;
  --accent-ink:      #7A3E22;

  /* Supporting pastels */
  --mint:            #C5E8D5;
  --mint-strong:     #7FC59A;
  --mint-soft:       #E8F6EE;
  --mint-ink:        #1F5A3A;

  --lavender:        #D9C9F0;
  --lavender-strong: #A487E0;
  --lavender-soft:   #F1EAFB;
  --lavender-ink:    #4B2E7A;

  --butter:          #F4E2B8;
  --butter-strong:   #E8B96B;
  --butter-soft:     #FBF4DD;
  --butter-ink:      #6B4E13;

  --blush:           #F6CDD4;
  --blush-strong:    #E8A5B0;
  --blush-soft:      #FCE8EB;
  --blush-ink:       #7A2838;

  /* Semantic */
  --success:         #7FC59A;
  --success-soft:    #E0F0E6;
  --warning:         #E8B96B;
  --warning-soft:    #F8ECD2;
  --danger:          #E28B8B;
  --danger-soft:     #F7DCDC;
  --info:            var(--primary);
  --info-soft:       var(--primary-soft);

  /* Foreground */
  --fg-1:            #1A1A20;   /* primary text */
  --fg-2:            #51515C;   /* secondary text */
  --fg-3:            #8A8A95;   /* tertiary/meta */
  --fg-on-primary:   #1A1A20;
  --fg-on-accent:    #1A1A20;

  /* Borders & dividers */
  --border:          rgba(20, 20, 30, 0.06);
  --border-strong:   rgba(20, 20, 30, 0.12);

  /* CEFR level colors (kept consistent with codebase intent) */
  --cefr-a1: #C5E8D5;
  --cefr-a2: #B8E0CE;
  --cefr-b1: #F4E2B8;
  --cefr-b2: #F9C6B0;
  --cefr-c1: #F6CDD4;
  --cefr-c2: #D9C9F0;

  /* Elevation */
  --shadow-1:        0 1px 2px rgba(20, 20, 30, 0.04);
  --shadow-2:        0 1px 2px rgba(20, 20, 30, 0.04),
                     0 4px 16px rgba(20, 20, 30, 0.06);
  --shadow-3:        0 2px 4px rgba(20, 20, 30, 0.06),
                     0 12px 32px rgba(20, 20, 30, 0.10);
  --shadow-tabbar:   0 -1px 2px rgba(20, 20, 30, 0.04),
                     0 -8px 32px rgba(20, 20, 30, 0.08);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;     /* default card */
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 9999px;

  /* Spacing (4pt grid) */
  --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;

  /* Type scale */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-ui:      'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display:  44px;  --lh-display: 1.08;  /* @kind font */  --tk-display: -0.02em;  /* @kind font */
  --fs-h1:       32px;  --lh-h1:      1.15;  /* @kind font */  --tk-h1:      -0.015em;  /* @kind font */
  --fs-h2:       24px;  --lh-h2:      1.2;   /* @kind font */  --tk-h2:      -0.01em;  /* @kind font */
  --fs-h3:       20px;  --lh-h3:      1.25;  /* @kind font */  --tk-h3:      -0.005em;  /* @kind font */
  --fs-title:    17px;  --lh-title:   1.3;   /* @kind font */  --tk-title:    0;  /* @kind font */
  --fs-body:     15px;  --lh-body:    1.5;   /* @kind font */  --tk-body:     0;  /* @kind font */
  --fs-small:    13px;  --lh-small:   1.4;   /* @kind font */  --tk-small:    0;  /* @kind font */
  --fs-caption:  11px;  --lh-caption: 1.3;   /* @kind font */  --tk-caption:  0.02em;  /* @kind font */

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);  /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-med:     220ms;  /* @kind other */
  --dur-slow:    320ms;  /* @kind other */
}

/* -------- Dark theme -------- */
[data-theme="dark"] {
  --bg:              #0F0F12;
  --surface:         #1A1A1F;
  --surface-2:       #22222A;
  --surface-3:       #2C2C36;
  --overlay:         rgba(0, 0, 0, 0.55);

  --primary:         #9CAEE8;
  --primary-strong:  #B8C5F2;
  --primary-soft:    #2A3358;
  --primary-ink:     #D6DDF6;

  --accent:          #E8A585;
  --accent-strong:   #F4BFA3;
  --accent-soft:     #4A2E1E;
  --accent-ink:      #F9D4BE;

  --mint:            #8CC6A4;
  --mint-strong:     #C5E8D5;
  --mint-soft:       #1F3A2B;
  --mint-ink:        #C8E6D4;

  --lavender:        #B5A0D6;
  --lavender-strong: #D9C9F0;
  --lavender-soft:   #2E2341;
  --lavender-ink:    #E0D3F0;

  --butter:          #D6BE82;
  --butter-strong:   #F4E2B8;
  --butter-soft:     #3D311A;
  --butter-ink:      #F0E2BE;

  --blush:           #D8A3AC;
  --blush-strong:    #F6CDD4;
  --blush-soft:      #3B2127;
  --blush-ink:       #F0CDD3;

  --fg-1:            #EFEFF2;
  --fg-2:            #9FA0A8;
  --fg-3:            #6B6C74;
  --fg-on-primary:   #0F0F12;
  --fg-on-accent:    #0F0F12;

  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.16);

  --shadow-1:        0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2:        0 1px 2px rgba(0, 0, 0, 0.35),
                     0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-3:        0 2px 4px rgba(0, 0, 0, 0.4),
                     0 12px 32px rgba(0, 0, 0, 0.55);
}

/* -------- Semantic type styles -------- */
body {
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tk-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.h1, h1 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tk-h1);
  color: var(--fg-1);
  margin: 0;
}
.h2, h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tk-h2);
  color: var(--fg-1);
  margin: 0;
}
.h3, h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tk-h3);
  color: var(--fg-1);
  margin: 0;
}
.title {
  font-weight: 600;
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  color: var(--fg-1);
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}
.body-2 {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}
.caption {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  letter-spacing: var(--tk-caption);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
code, .mono {
  font-family: var(--font-mono);
  font-size: calc(var(--fs-body) - 1px);
}

* { box-sizing: border-box; }