/* =========================================================================
   Studdy Design System — Core tokens
   Import into any html file: <link rel="stylesheet" href="colors_and_type.css" />
   ========================================================================= */

/* ---- Fonts (self-hosted TTFs in app/assets/fonts/) ---------------------- */
@font-face {
  font-family: 'Lora';
  src: url("/assets/lora_variable-e952b88a.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url("/assets/lora_variable_italic-78f173a4.ttf") format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/assets/inter_variable-5f4524aa.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url("/assets/inter_variable_italic-e540821d.ttf") format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/jetbrains_mono_regular-8b44e3da.ttf") format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/jetbrains_mono_medium-8a32ca45.ttf") format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =======================================================================
     COLORS — from library.fig /colors (canonical)
     ======================================================================= */
  --slate-50:  #EDF1F5;
  --slate-100: #C8D6E1;
  --slate-200: #A4BBCC;
  --slate-300: #7FA0B8;
  --slate-400: #5B85A4;
  --slate-500: #557C99; /* primary */
  --slate-600: #47677F;
  --slate-700: #334A5B;
  --slate-800: #1E2C37;
  --slate-900: #0A0F12;

  /* Warm paper neutral — the reader canvas */
  --paper:     #FAF7F2;
  --paper-2:   #F4EFE6;
  --ink:       #1E2C37; /* = slate-800, named for prose context */

  /* Semantic (warm, not candy) */
  --highlight-yellow: #FDE68A;
  --highlight-yellow-ink: #7A5D00;
  --highlight-pink:   #FBCFE8;
  --highlight-green:  #BBF7D0;
  --danger:   #C2553D;
  --success:  #4A7C59;
  --warning:  #D4A14A;
  --info:     var(--slate-500);

  /* Semantic color aliases */
  --bg-canvas:    var(--paper);
  --bg-surface:   #FFFFFF;
  --bg-sunken:    var(--slate-50);
  --bg-inverse:   var(--slate-900);

  --fg-1:         var(--slate-800);  /* body */
  --fg-2:         var(--slate-600);  /* secondary */
  --fg-3:         var(--slate-400);  /* muted / meta */
  --fg-inverse:   #FFFFFF;
  --fg-link:      var(--slate-500);

  --border-soft:  var(--slate-100);
  --border-strong: var(--slate-400);

  --primary:      var(--slate-500);
  --primary-hover: var(--slate-400);
  --primary-press: var(--slate-600);

  --overlay:      rgba(30, 44, 55, 0.32);
  --chrome-glass: rgba(250, 247, 242, 0.72);

  /* =======================================================================
     Highlight color → background mapping (single source of truth).
     Apply to any element with `data-highlight-color="<name>"` and the
     `--hl-bg` variable is set; elements then use `background: var(--hl-bg)`.
     ======================================================================= */
}

[data-highlight-color="yellow"] { --hl-bg: var(--highlight-yellow); }
[data-highlight-color="pink"]   { --hl-bg: var(--highlight-pink); }
[data-highlight-color="green"]  { --hl-bg: var(--highlight-green); }

:root {

  /* =======================================================================
     TYPOGRAPHY
     ======================================================================= */
  --font-serif: 'Lora', 'Iowan Old Style', 'Palatino', 'Georgia', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale — base 16 */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-prose:  1.65;

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

  /* =======================================================================
     SPACING — 4px grid
     ======================================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* =======================================================================
     RADII
     ======================================================================= */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* =======================================================================
     SHADOWS
     ======================================================================= */
  --shadow-1: 0 1px 2px rgba(10,15,18,0.06), 0 0 0 1px rgba(10,15,18,0.02);
  --shadow-2: 0 6px 20px -4px rgba(10,15,18,0.10), 0 2px 4px rgba(10,15,18,0.04);
  --shadow-3: 0 20px 48px -12px rgba(10,15,18,0.16), 0 6px 14px rgba(10,15,18,0.06);

  /* =======================================================================
     MOTION
     ======================================================================= */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.2);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply by giving an element class `ds` (so this system doesn't leak into
   every consumer page) — or remove the .ds prefix in your own app stylesheet.
   ========================================================================= */

.ds {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ds h1, .ds .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  color: var(--slate-800);
  margin: 0 0 var(--space-4);
}

.ds h2, .ds .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  color: var(--slate-800);
  margin: 0 0 var(--space-3);
}

.ds h3, .ds .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--slate-800);
  margin: 0 0 var(--space-3);
}

.ds h4, .ds .h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--slate-800);
  margin: 0 0 var(--space-2);
}

.ds p, .ds .body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-prose);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.ds .prose {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: var(--lh-prose);
  color: var(--ink);
}

.ds small, .ds .meta {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: var(--fg-2);
}

.ds .micro {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.ds code, .ds .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.15em 0.4em;
  background: var(--slate-50);
  border-radius: var(--radius-sm);
  color: var(--slate-700);
}

.ds kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  padding: 2px 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  color: var(--fg-2);
}

.ds a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.ds a:hover { border-bottom-color: currentColor; }

.ds blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-20);
  line-height: var(--lh-prose);
  color: var(--slate-700);
  border-left: 3px solid var(--slate-300);
  padding: var(--space-2) var(--space-5);
  margin: var(--space-6) 0;
}