/* =====================================================
   Catppuccin Mocha - Color & Type tokens
   Palette source: catppuccin/catppuccin docs/style-guide.md
   All values are the canonical Mocha hex codes.
   ===================================================== */

/* ---------- Fonts ----------
   Catppuccin's ecosystem is developer-tooling. No official marketing typeface.
   We standardize on:
   • Display / UI : Montserrat  (geometric sans - used on catppuccin.com)
   • Body         : Inter        (clean utilitarian sans)
   • Mono / Code  : JetBrains Mono (ligatures + designed for Catppuccin samples)
   • Handwriting  : Caveat      (playful - matches the "soft, warm" brand voice)
   -------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Caveat:wght@500;700&display=swap');

:root {
  /* ---------- Mocha palette (canonical) ---------- */
  --ctp-rosewater: #f5e0dc;
  --ctp-flamingo:  #f2cdcd;
  --ctp-pink:      #f5c2e7;
  --ctp-mauve:     #cba6f7;
  --ctp-red:       #f38ba8;
  --ctp-maroon:    #eba0ac;
  --ctp-peach:     #fab387;
  --ctp-yellow:    #f9e2af;
  --ctp-green:     #a6e3a1;
  --ctp-teal:      #94e2d5;
  --ctp-sky:       #89dceb;
  --ctp-sapphire:  #74c7ec;
  --ctp-blue:      #89b4fa;
  --ctp-lavender:  #b4befe;

  /* ---------- Neutrals / Surfaces ---------- */
  --ctp-text:      #cdd6f4;
  --ctp-subtext1:  #bac2de;
  --ctp-subtext0:  #a6adc8;
  --ctp-overlay2:  #9399b2;
  --ctp-overlay1:  #7f849c;
  --ctp-overlay0:  #6c7086;
  --ctp-surface2:  #585b70;
  --ctp-surface1:  #45475a;
  --ctp-surface0:  #313244;
  --ctp-base:      #1e1e2e;
  --ctp-mantle:    #181825;
  --ctp-crust:     #11111b;

  /* ---------- Semantic roles (style-guide driven) ---------- */
  --bg:            var(--ctp-base);     /* primary background pane */
  --bg-secondary:  var(--ctp-mantle);   /* secondary panes */
  --bg-tertiary:   var(--ctp-crust);    /* deepest pane */
  --surface-1:     var(--ctp-surface0); /* surface element */
  --surface-2:     var(--ctp-surface1);
  --surface-3:     var(--ctp-surface2);
  --overlay-1:     var(--ctp-overlay0); /* muted overlays */
  --overlay-2:     var(--ctp-overlay1);
  --overlay-3:     var(--ctp-overlay2);

  --fg:            var(--ctp-text);     /* body + main headlines */
  --fg-muted:      var(--ctp-subtext1); /* sub-headlines */
  --fg-subtle:     var(--ctp-subtext0); /* labels */
  --fg-faint:      var(--ctp-overlay1); /* "subtle" role */
  --fg-on-accent:  var(--ctp-base);     /* text on accent bg */

  --link:          var(--ctp-blue);
  --link-visited:  var(--ctp-lavender);
  --link-hover:    var(--ctp-sky);

  --success:       var(--ctp-green);
  --warning:       var(--ctp-yellow);
  --warning-alt:   var(--ctp-peach);
  --danger:        var(--ctp-red);
  --info:          var(--ctp-teal);

  --accent:        var(--ctp-mauve);    /* primary brand accent */
  --accent-2:      var(--ctp-pink);
  --accent-3:      var(--ctp-lavender);
  --cursor:        var(--ctp-rosewater);
  --selection:     color-mix(in srgb, var(--ctp-overlay2) 25%, transparent);

  /* Syntax (for mock code blocks / editor UIs) */
  --syn-keyword:   var(--ctp-mauve);
  --syn-string:    var(--ctp-green);
  --syn-number:    var(--ctp-peach);
  --syn-function:  var(--ctp-blue);
  --syn-type:      var(--ctp-yellow);
  --syn-param:     var(--ctp-maroon);
  --syn-operator:  var(--ctp-sky);
  --syn-builtin:   var(--ctp-red);
  --syn-comment:   var(--ctp-overlay2);
  --syn-regex:     var(--ctp-pink);
  --syn-macro:     var(--ctp-rosewater);
  --syn-tag:       var(--ctp-teal);

  /* ---------- Type families ---------- */
  --font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-hand:    'Caveat', cursive;

  /* ---------- Type scale ---------- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  30px;
  --fs-3xl:  38px;
  --fs-4xl:  48px;
  --fs-5xl:  60px;
  --fs-6xl:  76px;

  /* ---------- Spacing (4px baseline) ---------- */
  --s-0: 0;
  --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: 48px;
  --s-16: 64px;

  /* ---------- Radii ---------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-sm: 0 1px 2px rgba(17,17,27,0.45);
  --shadow-md: 0 4px 16px rgba(17,17,27,0.55);
  --shadow-lg: 0 14px 40px rgba(17,17,27,0.70);
  --ring:      0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
}

/* ------------- Semantic element defaults ------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4xl); line-height: 1.1; letter-spacing: -0.02em; color: var(--fg); }
h2, .h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xl); line-height: 1.15; letter-spacing: -0.015em; color: var(--fg); }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
h4, .h4 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.3; color: var(--fg); }
h5, .h5 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--fg-muted); }
h6, .h6 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-base); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-subtle); }

p, .body { font-family: var(--font-body); font-size: var(--fs-base); color: var(--fg); }
.small { font-size: var(--fs-sm); color: var(--fg-muted); }
.caption { font-size: var(--fs-xs); color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.1em; }
.eyebrow { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link-hover) 50%, transparent); text-underline-offset: 3px; }
a:visited { color: var(--link-visited); }

code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-1);
  padding: 0.12em 0.35em;
  border-radius: var(--r-sm);
  color: var(--fg);
}
pre {
  font-family: var(--font-mono);
  background: var(--bg-secondary);
  color: var(--fg);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--surface-1);
  overflow: auto;
}
pre code { background: transparent; padding: 0; }

::selection { background: var(--selection); }