/*
   Figlime — Theme (shadcn-style semantic tokens).
   Shared across every page. Flat, no gradients. Plum is the brand primary,
   lime is the CTA accent. This file owns the cascade-layer order, so it must
   load before styles.css.
*/

@layer reset, base, layout, components, utilities, animations;

@layer base {
  :root {
    /* ---- shadcn-style semantic tokens (default theme: emerald) ---- */
    --background:            hsl(0 0% 100%);
    --foreground:            hsl(170 18% 9%);

    --card:                  hsl(0 0% 100%);
    --card-foreground:       hsl(170 18% 9%);

    --muted:                 hsl(165 22% 96%);
    --muted-foreground:      hsl(170 8% 40%);

    --primary:               hsl(164 72% 16%);   /* deep emerald */
    --primary-foreground:    hsl(0 0% 100%);

    --secondary:             hsl(165 22% 95%);
    --secondary-foreground:  hsl(164 40% 16%);

    --accent:                hsl(165 22% 95%);
    --accent-foreground:     hsl(164 40% 16%);

    --cta:                   hsl(160 72% 37%);   /* emerald */
    --cta-foreground:        hsl(0 0% 100%);

    --border:                hsl(165 16% 89%);
    --input:                 hsl(165 16% 89%);
    --ring:                  hsl(160 72% 37%);

    --radius:                0.625rem;

    /* ---- Brand aliases (kept so existing component CSS keeps working) ---- */
    --plum:        var(--primary);
    --plum-deep:   hsl(164 72% 12%);
    --plum-soft:   hsl(168 30% 32%);
    --plum-ink:    var(--cta-foreground);

    --lime:        var(--cta);
    --lime-bright: hsl(160 72% 42%);
    --lime-soft:   hsl(160 60% 40% / 0.13);

    /* Surfaces */
    --bg:          var(--background);
    --bg-tint:     var(--muted);
    --panel:       var(--card);
    --panel-solid: var(--card);

    /* Text */
    --text:        var(--foreground);
    --text-soft:   hsl(170 10% 27%);
    --text-muted:  var(--muted-foreground);

    /* Lines */
    --line:        var(--border);
    --line-strong: hsl(165 16% 82%);

    /* Radius scale (derived from --radius) */
    --r-sm: calc(var(--radius) - 2px);
    --r-md: var(--radius);
    --r-lg: calc(var(--radius) + 6px);
    --r-xl: calc(var(--radius) + 14px);
    --r-full: 9999px;

    /* Type */
    --font-head: 'Geist', system-ui, sans-serif;
    --font-body: 'Geist', system-ui, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, monospace;

    --fs-h1: clamp(2.4rem, 1.4rem + 4.4vw, 4.2rem);
    --fs-h2: clamp(1.85rem, 1.2rem + 2.6vw, 2.8rem);
    --fs-h3: clamp(1.2rem, 1rem + 0.9vw, 1.5rem);
    --fs-lead: clamp(1.05rem, 0.98rem + 0.5vw, 1.2rem);
    --fs-body: clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
    --fs-sm: 0.875rem;

    /* Layout */
    --container: 1200px;
    --header-h: 84px;

    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--background);
  }

  ::selection { background: var(--cta); color: var(--cta-foreground); }

  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.62;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--foreground);
  }

  :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
}