/* ============================================================================
   PLW COMPONENT LIBRARY — LAYERED TOKEN CONTRACT  (Rev 3)
   ----------------------------------------------------------------------------
   One contract, composed from three INDEPENDENT layers:

        [data-palette]  →  color tokens        (20 seeded palettes)
        [data-type]     →  font tokens         (11 pairings, sans + serif)
        [data-shape]    →  radius + shadow      (5 personalities)

   Put all three on one element and it wears that combination. Components read
   the SAME token names regardless. To theme a real customer: pick one of each,
   then override --color-accent with their logo hex. If they hand over a full
   brand guide, override --color-fg / -bg / -surface / -accent too. Nothing in
   the component layer changes. Same skeleton, their brand.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0. SHARED SKELETON  (constant across every palette / type / shape)
   --------------------------------------------------------------------------- */
:root {
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;  --text-lg: 1.125rem;
  --text-xl: 1.25rem;  --text-2xl: 1.5rem;  --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --text-5xl: 3rem;    --text-6xl: 3.75rem; --text-7xl: 4.5rem;

  --leading-none: 1; --leading-tight: 1.15; --leading-snug: 1.3;
  --leading-normal: 1.5; --leading-relaxed: 1.7;

  --space-1: 0.25rem;  --space-2: 0.5rem;  --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;  --space-7: 1.75rem; --space-8: 2rem;
  --space-9: 2.25rem;  --space-10: 2.5rem; --space-11: 2.75rem;--space-12: 3rem;
  --space-14: 3.5rem;  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;
  --space-28: 7rem;    --space-32: 8rem;

  --border-thin: 1px;  --border-default: 2px;  --border-heavy: 3px;

  /* Neutral fallbacks (each layer overrides its own group) */
  --font-display: ui-serif, Georgia, serif;
  --font-body: system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --color-fg: #18181b;     --color-bg: #ffffff;     --color-surface: #fafafa;
  --color-muted: #71717a;  --color-accent: #18181b; --color-accent-fg: #ffffff;
  --color-border: #e4e4e7; --color-ring: #18181b;
  --color-success: #16794a;--color-warning: #b45309;--color-danger: #b91c1c;

  --radius-none: 0px; --radius-sm: 0.25rem; --radius-md: 0.5rem;
  --radius-lg: 0.75rem; --radius-pill: 9999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.12);
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,.08);
}

/* ===========================================================================
   LAYER 1 · PALETTE  — color tokens only. 20 seeded sets.
   accent-fg is tuned to clear WCAG AA on its accent.
   =========================================================================== */

/* --- Originals --- */
[data-palette="champagne"] { --color-fg:#1a1a1a; --color-bg:#f7f3ec; --color-surface:#fffdf8; --color-muted:#645d54; --color-accent:#c9a96e; --color-accent-fg:#1a1a1a; --color-border:#e3dac9; --color-ring:#1a1a1a; --color-success:#46795a; --color-warning:#9a6b1e; --color-danger:#9e3b35; }
[data-palette="yellow"]    { --color-fg:#121212; --color-bg:#ffffff; --color-surface:#f2f2ee; --color-muted:#595959; --color-accent:#ffd400; --color-accent-fg:#121212; --color-border:#121212; --color-ring:#121212; --color-success:#1b7a3d; --color-warning:#c2410c; --color-danger:#cc2222; }
[data-palette="coral"]     { --color-fg:#33303a; --color-bg:#fff7f1; --color-surface:#ffffff; --color-muted:#6f6562; --color-accent:#e07a5f; --color-accent-fg:#2a1812; --color-border:#f3e3d8; --color-ring:#c2543b; --color-success:#4f9d77; --color-warning:#d99a3e; --color-danger:#d65a52; }
[data-palette="forest"]    { --color-fg:#1f2420; --color-bg:#f4f1e8; --color-surface:#fffefb; --color-muted:#565c52; --color-accent:#2f6b4e; --color-accent-fg:#f4f1e8; --color-border:#dcd8c7; --color-ring:#2f6b4e; --color-success:#3f7a57; --color-warning:#9a6b1e; --color-danger:#9e3b35; }
[data-palette="navy"]      { --color-fg:#1a2238; --color-bg:#f1efe8; --color-surface:#ffffff; --color-muted:#565d6e; --color-accent:#b0894a; --color-accent-fg:#1a2238; --color-border:#d8d4c6; --color-ring:#1a2238; --color-success:#3f7a57; --color-warning:#a6791f; --color-danger:#9e3b35; }
[data-palette="oxblood"]   { --color-fg:#2a1f1d; --color-bg:#f3ece2; --color-surface:#fffbf5; --color-muted:#6b5d54; --color-accent:#7d2b2b; --color-accent-fg:#f5efe6; --color-border:#e0d4c4; --color-ring:#7d2b2b; --color-success:#46795a; --color-warning:#9a6b1e; --color-danger:#b5403a; }
[data-palette="slate"]     { --color-fg:#1e2530; --color-bg:#f4f6f9; --color-surface:#ffffff; --color-muted:#56616f; --color-accent:#2563eb; --color-accent-fg:#ffffff; --color-border:#d9dee6; --color-ring:#2563eb; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#c0352f; }
[data-palette="terracotta"]{ --color-fg:#3a2e26; --color-bg:#f6efe2; --color-surface:#fffdf8; --color-muted:#6e6054; --color-accent:#c2613b; --color-accent-fg:#fbf3e8; --color-border:#e6d8c4; --color-ring:#c2613b; --color-success:#4f8a5e; --color-warning:#b07d28; --color-danger:#b5443a; }

/* --- New: bold, saturated, high-distinction --- */
[data-palette="crimson"]   { --color-fg:#221416; --color-bg:#fdf6f5; --color-surface:#ffffff; --color-muted:#6a5a5b; --color-accent:#d8232a; --color-accent-fg:#ffffff; --color-border:#f0dcdb; --color-ring:#b3171d; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#b3171d; }
[data-palette="cobalt"]    { --color-fg:#15182b; --color-bg:#f5f6fd; --color-surface:#ffffff; --color-muted:#565a72; --color-accent:#2742d6; --color-accent-fg:#ffffff; --color-border:#dde0f3; --color-ring:#2742d6; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#c0352f; }
[data-palette="emerald"]   { --color-fg:#112019; --color-bg:#f2faf5; --color-surface:#ffffff; --color-muted:#566860; --color-accent:#07845a; --color-accent-fg:#ffffff; --color-border:#d3ece0; --color-ring:#07845a; --color-success:#07845a; --color-warning:#b07d28; --color-danger:#c0352f; }
[data-palette="violet"]    { --color-fg:#1d1530; --color-bg:#f8f5fd; --color-surface:#ffffff; --color-muted:#5f5872; --color-accent:#6d28d9; --color-accent-fg:#ffffff; --color-border:#e6def5; --color-ring:#6d28d9; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#c0352f; }
[data-palette="fuchsia"]   { --color-fg:#2a1320; --color-bg:#fdf4f9; --color-surface:#ffffff; --color-muted:#6e5a64; --color-accent:#c81d77; --color-accent-fg:#ffffff; --color-border:#f2d9e8; --color-ring:#c81d77; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#b3171d; }
[data-palette="tangerine"] { --color-fg:#2a1a10; --color-bg:#fff7f0; --color-surface:#ffffff; --color-muted:#6e5d50; --color-accent:#e2580c; --color-accent-fg:#221206; --color-border:#f6e0cf; --color-ring:#c2490a; --color-success:#1b7a4f; --color-warning:#b07d28; --color-danger:#c0352f; }
[data-palette="teal"]      { --color-fg:#0f2120; --color-bg:#f0faf9; --color-surface:#ffffff; --color-muted:#556765; --color-accent:#0c7d72; --color-accent-fg:#ffffff; --color-border:#d2ece9; --color-ring:#0c7d72; --color-success:#0c7d72; --color-warning:#b07d28; --color-danger:#c0352f; }
[data-palette="ink"]       { --color-fg:#121212; --color-bg:#ffffff; --color-surface:#f6f6f6; --color-muted:#6b6b6b; --color-accent:#161616; --color-accent-fg:#ffffff; --color-border:#e2e2e2; --color-ring:#161616; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#c0352f; }
[data-palette="sky"]       { --color-fg:#112430; --color-bg:#f3fafe; --color-surface:#ffffff; --color-muted:#556673; --color-accent:#0a6fa8; --color-accent-fg:#ffffff; --color-border:#d5eaf6; --color-ring:#0a6fa8; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#c0352f; }
[data-palette="mustard"]   { --color-fg:#241d0e; --color-bg:#fbf7ec; --color-surface:#fffef9; --color-muted:#6a6147; --color-accent:#c79a12; --color-accent-fg:#221b08; --color-border:#ece2c6; --color-ring:#8a6a08; --color-success:#1b7a4f; --color-warning:#b07d28; --color-danger:#c0352f; }
[data-palette="plum"]      { --color-fg:#241522; --color-bg:#faf4f8; --color-surface:#ffffff; --color-muted:#695563; --color-accent:#7a3b69; --color-accent-fg:#f7eef4; --color-border:#ecdce7; --color-ring:#7a3b69; --color-success:#1b7a4f; --color-warning:#b45309; --color-danger:#b5403a; }
[data-palette="sage"]      { --color-fg:#1f2620; --color-bg:#f3f6f0; --color-surface:#ffffff; --color-muted:#5c665b; --color-accent:#6b8f71; --color-accent-fg:#14201a; --color-border:#dde4d7; --color-ring:#46624c; --color-success:#3f7a57; --color-warning:#9a6b1e; --color-danger:#9e3b35; }

/* ===========================================================================
   LAYER 2 · TYPE  — font tokens only. Mono is constant across pairings.
   =========================================================================== */
/* serif-display */
[data-type="playfair"]  { --font-display:"Playfair Display", Georgia, serif; --font-body:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="dmserif"]   { --font-display:"DM Serif Display", Georgia, serif; --font-body:"DM Sans", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="spectral"]  { --font-display:"Spectral", Georgia, serif; --font-body:"Work Sans", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
/* sans-display */
[data-type="anton"]     { --font-display:"Anton", "Arial Narrow", sans-serif; --font-body:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="bricolage"] { --font-display:"Bricolage Grotesque", system-ui, sans-serif; --font-body:"Nunito Sans", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="archivo"]   { --font-display:"Archivo Black", system-ui, sans-serif; --font-body:"Archivo", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="spacegrotesk"]{ --font-display:"Space Grotesk", system-ui, sans-serif; --font-body:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="sora"]      { --font-display:"Sora", system-ui, sans-serif; --font-body:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="jakarta"]   { --font-display:"Plus Jakarta Sans", system-ui, sans-serif; --font-body:"Plus Jakarta Sans", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="outfit"]    { --font-display:"Outfit", system-ui, sans-serif; --font-body:"Inter", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }
[data-type="verdana"]   { --font-display:Verdana, Geneva, Tahoma, sans-serif; --font-body:Verdana, Geneva, Tahoma, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, monospace; }

/* ===========================================================================
   LAYER 3 · SHAPE  — radius + shadow. Shadows reference color tokens, so a
   shape adapts to whatever palette it stacks with. 5 personalities.
   =========================================================================== */
[data-shape="brutalist"] {
  --radius-none:0px; --radius-sm:0px; --radius-md:0px; --radius-lg:0px; --radius-pill:0px;
  --shadow-sm:2px 2px 0 var(--color-fg);
  --shadow-md:4px 4px 0 var(--color-fg);
  --shadow-lg:7px 7px 0 var(--color-fg);
  --shadow-inset:inset 3px 3px 0 color-mix(in srgb, var(--color-fg) 18%, transparent);
}
[data-shape="refined"] {
  --radius-none:0px; --radius-sm:0.125rem; --radius-md:0.25rem; --radius-lg:0.375rem; --radius-pill:9999px;
  --shadow-sm:0 1px 2px color-mix(in srgb, var(--color-fg) 8%, transparent);
  --shadow-md:0 6px 18px color-mix(in srgb, var(--color-fg) 10%, transparent);
  --shadow-lg:0 18px 40px color-mix(in srgb, var(--color-fg) 14%, transparent);
  --shadow-inset:inset 0 1px 2px color-mix(in srgb, var(--color-fg) 8%, transparent);
}
[data-shape="soft"] {
  --radius-none:0px; --radius-sm:0.375rem; --radius-md:0.75rem; --radius-lg:1.25rem; --radius-pill:9999px;
  --shadow-sm:0 1px 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
  --shadow-md:0 10px 28px color-mix(in srgb, var(--color-accent) 18%, transparent);
  --shadow-lg:0 22px 50px color-mix(in srgb, var(--color-accent) 22%, transparent);
  --shadow-inset:inset 0 2px 4px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
[data-shape="pill"] {
  --radius-none:0px; --radius-sm:9999px; --radius-md:9999px; --radius-lg:1.75rem; --radius-pill:9999px;
  --shadow-sm:0 1px 3px color-mix(in srgb, var(--color-fg) 9%, transparent);
  --shadow-md:0 8px 22px color-mix(in srgb, var(--color-fg) 12%, transparent);
  --shadow-lg:0 20px 44px color-mix(in srgb, var(--color-fg) 16%, transparent);
  --shadow-inset:inset 0 1px 2px color-mix(in srgb, var(--color-fg) 9%, transparent);
}
[data-shape="flat"] {
  --radius-none:0px; --radius-sm:0.125rem; --radius-md:0.25rem; --radius-lg:0.375rem; --radius-pill:9999px;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
  --shadow-inset:inset 0 0 0 1px color-mix(in srgb, var(--color-fg) 10%, transparent);
}