/* ============================================================
   STUDIO 26 — Design Tokens  ·  "Craft Table"
   Colour · Type · Spacing · Radii · Shadow/Glow · Motion · Texture
   Fonts are free Google Fonts (Syne / Space Grotesk / Spline Sans Mono).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap");

:root{
  /* ---------- SURFACES (dark, the home base) ---------- */
  --void:        #0B0710;  /* primary background — near-black w/ a whisper of purple */
  --surface-1:   #14101B;  /* raised panel */
  --surface-2:   #1E1726;  /* card / hover surface */
  --bone:        #EFE7D8;  /* "plate" paper, light insets */

  /* ---------- BRAND / JEWEL ACCENTS ---------- */
  --magenta:     #FF2D9B;  /* PRIMARY accent + actions */
  --logo-pink:   #E8669E;  /* the pink wordmark colour */
  --cobalt:      #2B3A9B;  /* the blue wordmark colour — secondary */
  --electric:    #3A6BF0;  /* brighter cobalt for links/glow */
  --violet:      #7A2BD6;  /* tertiary */
  --lime:        #18E0C8;  /* SPARK (teal) — use sparingly, one per view */

  /* ---------- TEXT ---------- */
  --pearl:       #F6EEF2;  /* primary text on dark (warm white) */
  --lilac-mute:  #B9A7B4;  /* secondary text */
  --faint:       #6E6470;  /* tertiary / captions on dark */
  --ink:         #2E1F2A;  /* text on bone/light insets */

  /* ---------- LINES ---------- */
  --line:        rgba(246,238,242,.14);   /* hairline on dark */
  --line-strong: rgba(246,238,242,.28);
  --line-ink:    rgba(46,31,42,.18);       /* hairline on bone */

  /* ---------- SEMANTIC ---------- */
  --bg:            var(--void);
  --fg:            var(--pearl);
  --fg-2:          var(--lilac-mute);
  --fg-3:          var(--faint);
  --accent:        var(--magenta);
  --accent-2:      var(--cobalt);
  --accent-3:      var(--violet);
  --spark:         var(--lime);
  --link:          var(--magenta);
  --link-hover:    var(--lime);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Syne", system-ui, sans-serif;
  --font-body:    "Space Grotesk", system-ui, sans-serif;
  --font-mono:    "Spline Sans Mono", ui-monospace, monospace;

  /* ---------- TYPE SCALE (fluid) ---------- */
  --t-display: clamp(48px, 8vw, 104px);  /* hero */
  --t-h1:      clamp(38px, 5.4vw, 72px);
  --t-h2:      clamp(28px, 3.4vw, 44px);
  --t-h3:      clamp(21px, 2vw, 27px);
  --t-lead:    clamp(17px, 1.4vw, 20px);
  --t-body:    16px;
  --t-small:   14px;
  --t-label:   12px;   /* mono, uppercase, tracked */
  --t-caption: 11px;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10:128px;
  --page-pad: 52px;       /* desktop edge padding */
  --page-max: 1200px;

  /* ---------- RADII ---------- */
  --r-sharp: 2px;   /* plates, sharp graphic edges */
  --r-card:  6px;   /* cards, frames, images */
  --r-pill:  999px; /* pills, tags, round buttons */

  /* ---------- SHADOW / GLOW (dark-first) ---------- */
  --glow-magenta: drop-shadow(0 2px 16px rgba(255,45,155,.45));
  --glow-lime:    drop-shadow(0 0 14px rgba(24,224,200,.55));
  --elev-float:   0 30px 60px -30px rgba(0,0,0,.7);
  --elev-card:    0 18px 40px -28px rgba(0,0,0,.65);

  /* ---------- MOTION ---------- */
  --ease:      cubic-bezier(0.2,0.8,0.2,1);
  --dur-fast:  .18s;
  --dur:       .4s;
  --dur-slow:  .6s;

  /* ---------- SIGNATURE GRAIN ----------
     Use as a fixed/absolute ::before overlay:
     content:"";position:absolute;inset:0;
     background-image:var(--grain);mix-blend-mode:overlay;opacity:.5; */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");

  /* ---------- IMAGE DARKENING (hero protection) ---------- */
  --img-veil: radial-gradient(120% 90% at 70% 30%, rgba(11,7,16,.12), rgba(11,7,16,.86) 75%),
              linear-gradient(180deg, rgba(11,7,16,.2), rgba(11,7,16,.7));
}

/* ============================================================
   SEMANTIC ELEMENT STYLES  (opt-in: scope under .s26 or :root)
   ============================================================ */

.s26{ background:var(--bg); color:var(--fg); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }

.s26-display{
  font-family:var(--font-display); font-weight:800; font-size:var(--t-display);
  line-height:.86; letter-spacing:-.02em; margin:0;
}
.s26-h1{ font-family:var(--font-display); font-weight:700; font-size:var(--t-h1); line-height:.96; letter-spacing:-.01em; margin:0; }
.s26-h2{ font-family:var(--font-display); font-weight:700; font-size:var(--t-h2); line-height:1.0;  letter-spacing:-.01em; margin:0; }
.s26-h3{ font-family:var(--font-display); font-weight:600; font-size:var(--t-h3); line-height:1.1;  margin:0; }
.s26-lead{ font-family:var(--font-body); font-size:var(--t-lead); line-height:1.5; color:var(--fg); margin:0; }
.s26-body{ font-family:var(--font-body); font-size:var(--t-body); line-height:1.6; color:var(--fg-2); margin:0; }
.s26-small{ font-size:var(--t-small); line-height:1.5; color:var(--fg-2); }

.s26-label,.s26-kicker{
  font-family:var(--font-mono); font-weight:500; font-size:var(--t-label);
  letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3);
}
.s26-kicker{ color:var(--magenta); letter-spacing:.28em; }
.s26-caption{ font-family:var(--font-mono); font-size:var(--t-caption); letter-spacing:.08em; text-transform:uppercase; }

a.s26-link{ color:var(--link); text-decoration:none; transition:color var(--dur-fast) var(--ease); }
a.s26-link:hover{ color:var(--link-hover); }

@media (max-width:760px){ :root{ --page-pad:24px; } }