/* Lingua — Tutor Design System · tokens
   Colors, typography, spacing, effects. Fonts are self-hosted
   (see assets/fonts/fonts.css); these variables only reference the font-family names. */

/* ─────────────────────────────────────────────────────────────
   COLORS — warm academic paper, sage, terracotta, ochre, blush.
   ───────────────────────────────────────────────────────────── */
:root {
  --paper:        #F8F3E9;
  --paper-deep:   #F0E7D5;
  --paper-card:   #FFFDF7;
  --paper-edge:   #ECE3D2;

  --ink-900:      #2C271F;
  --ink-700:      #4A443A;
  --ink-500:      #6E665A;
  --ink-300:      #9A9282;

  --green-800:    #3E4D33;
  --green-700:    #4C5E3F;
  --green-600:    #5E7350;
  --green-500:    #738B5F;
  --green-300:    #AEC096;
  --green-200:    #CCD9B9;
  --green-100:    #E6EDD9;

  --orange-700:   #A8542A;
  --orange-600:   #BC6334;
  --orange-500:   #CF7A45;
  --orange-300:   #E4B193;
  --orange-100:   #F5E0CF;

  --yellow-600:   #C68F2E;
  --yellow-500:   #D9A441;
  --yellow-300:   #ECCB7E;
  --yellow-100:   #F7E9C5;

  --pink-400:     #E0AEA5;
  --pink-300:     #ECC8C0;
  --pink-200:     #F4DCD6;
  --pink-100:     #FAECE8;

  --success:      #5E7350;
  --warning:      #C68F2E;
  --danger:       #B0492F;
  --info:         #5C7A86;

  --bg:             var(--paper);
  --bg-subtle:      var(--paper-deep);
  --surface-card:   var(--paper-card);
  --surface-sunk:   var(--paper-deep);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-muted:     var(--ink-300);
  --text-on-color:  #FBF7EE;

  --primary:        var(--green-600);
  --primary-strong: var(--green-700);
  --primary-soft:   var(--green-100);
  --on-primary:     #FBF7EE;

  --accent-warm:    var(--orange-500);
  --accent-warm-soft: var(--orange-100);
  --accent-gold:    var(--yellow-500);
  --accent-gold-soft: var(--yellow-100);
  --accent-soft:    var(--pink-300);
  --accent-soft-bg: var(--pink-100);

  --border:         #E0D6C2;
  --border-strong:  #CBBFA6;
  --ring:           color-mix(in oklch, var(--green-500) 55%, transparent);

  --link:           var(--green-700);
  --link-hover:     var(--orange-600);
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────── */
:root {
  --font-serif: "Alegreya", "Iowan Old Style", Georgia, serif;
  --font-sans:  "Golos Text", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-3xl:   3rem;
  --text-4xl:   4rem;
  --text-5xl:   5.5rem;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.14em;

  --display-font:   var(--font-serif);
  --heading-font:   var(--font-serif);
  --body-font:      var(--font-sans);
  --eyebrow-font:   var(--font-sans);
}

.t-display {
  font-family: var(--display-font);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.t-eyebrow {
  font-family: var(--eyebrow-font);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  font-size: var(--text-xs);
  color: var(--accent-warm);
}
.t-italic-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
}

/* ─────────────────────────────────────────────────────────────
   SPACING & LAYOUT
   ───────────────────────────────────────────────────────────── */
:root {
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   3rem;
  --space-8:   4rem;
  --space-9:   6rem;
  --space-10:  8rem;

  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1140px;
  --container-xl:  1320px;

  --border-width: 1px;
  --border-width-strong: 1.5px;
}

/* ─────────────────────────────────────────────────────────────
   EFFECTS
   ───────────────────────────────────────────────────────────── */
:root {
  --shadow-xs:  0 1px 2px rgba(63, 52, 34, 0.06);
  --shadow-sm:  0 2px 6px rgba(63, 52, 34, 0.08);
  --shadow-md:  0 6px 18px rgba(63, 52, 34, 0.10);
  --shadow-lg:  0 14px 38px rgba(63, 52, 34, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  --focus-ring: 0 0 0 3px var(--ring);

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-gentle: cubic-bezier(0.34, 1.2, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  --paper-grain:
    radial-gradient(circle at 18% 24%, rgba(115,139,95,0.05) 0, transparent 38%),
    radial-gradient(circle at 82% 12%, rgba(207,122,69,0.04) 0, transparent 42%),
    radial-gradient(circle at 60% 88%, rgba(217,164,65,0.045) 0, transparent 46%);
}

.bg-paper-grain {
  background-color: var(--paper);
  background-image: var(--paper-grain);
}