/* ============================================================
   Grid & Glint — Design System entry point
   fonts → tokens → base.
   ============================================================ */

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SpaceMono-Regular.ttf") format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/SpaceMono-Italic.ttf") format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/SpaceMono-Bold.ttf") format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/SpaceMono-BoldItalic.ttf") format('truetype');
}

:root {
  /* ---- Core brand ---- */
  --navy:   #222831;
  --mint:   #8EFFD3;
  --yellow: #FBCC42;
  --teal:   #00ADB5;
  --coral:  #FF595A;

  --paper:        #F4F4EF;
  --paper-bright: #FFFFFF;

  --navy-900: #15181E;
  --navy-800: #1B2027;
  --navy-700: #222831;
  --navy-600: #2C333E;
  --navy-500: #3A434F;
  --navy-400: #5A6675;
  --navy-300: #8A95A2;
  --navy-200: #C2C9D1;
  --navy-100: #E4E7EB;

  --yellow-bright: #FFD95C;
  --yellow-deep:   #E0AF1E;
  --teal-bright:   #1ECAD2;
  --teal-deep:     #00858B;
  --mint-deep:     #5FE3B4;
  --coral-bright:  #FF7779;
  --coral-deep:    #E23E3F;

  --success-500: #00ADB5;
  --success-bg:  #00858B;
  --warning-500: #FBCC42;
  --warning-bg:  #E0AF1E;
  --danger-500:  #FF595A;
  --danger-bg:   #E23E3F;
  --info-500:    #8EFFD3;

  --bg:            var(--navy-700);
  --surface:       var(--navy-700);
  --surface-card:  var(--navy-600);
  --surface-sunk:  var(--navy-800);
  --surface-raised:var(--navy-500);

  --text-strong: var(--paper);
  --text-body:   #D4DAE1;
  --text-muted:  var(--navy-300);
  --text-faint:  var(--navy-400);
  --text-on-pop: var(--navy-700);

  --border:        rgba(244,244,239,0.16);
  --border-soft:   rgba(244,244,239,0.09);
  --border-strong: rgba(244,244,239,0.34);
  --border-pop:    var(--yellow);

  --accent:        var(--yellow);
  --accent-bright: var(--yellow-bright);
  --accent-deep:   var(--yellow-deep);
  --accent-fg:     var(--navy-700);

  --link:          var(--mint);
  --link-hover:    var(--teal-bright);

  --focus-ring-color: var(--yellow);
}

[data-theme="paper"] {
  --bg:           var(--paper);
  --surface:      var(--paper);
  --surface-card: var(--paper-bright);
  --surface-sunk: #E9E9E2;
  --surface-raised: var(--paper-bright);

  --text-strong: var(--navy-700);
  --text-body:   var(--navy-600);
  --text-muted:  var(--navy-400);
  --text-faint:  var(--navy-300);

  --border:        rgba(34,40,49,0.16);
  --border-soft:   rgba(34,40,49,0.09);
  --border-strong: rgba(34,40,49,0.42);

  --link:        var(--teal-deep);
  --link-hover:  var(--teal);
}

:root {
  --font-mono:    'Space Mono', ui-monospace, 'SF Mono', monospace;
  --font-display: var(--font-mono);
  --font-sans:    var(--font-mono);

  --fw-regular: 400;
  --fw-bold:    700;

  --text-2xs: 0.6875rem;
  --text-xs:  0.75rem;
  --text-sm:  0.8125rem;
  --text-base:0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.3125rem;
  --text-xl:  1.625rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.875rem;
  --text-4xl: 3.75rem;
  --text-5xl: 5rem;
  --text-6xl: 6.5rem;

  --lh-tight:  1.0;
  --lh-snug:   1.12;
  --lh-normal: 1.4;
  --lh-relaxed:1.65;

  --ls-tighter: -0.04em;
  --ls-tight:   -0.02em;
  --ls-normal:  0em;
  --ls-wide:    0.06em;
  --ls-label:   0.18em;

  --display-weight: 700;
  --display-lh:     var(--lh-tight);
  --display-ls:     var(--ls-tighter);
  --display-transform: uppercase;

  --heading-weight: 700;
  --heading-lh:     var(--lh-snug);
  --heading-ls:     var(--ls-tight);

  --body-weight: var(--fw-regular);
  --body-lh:     var(--lh-relaxed);

  --label-weight:  var(--fw-bold);
  --label-size:    var(--text-2xs);
  --label-ls:      var(--ls-label);
  --label-transform: uppercase;
}

.gg-display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--display-lh);
  letter-spacing: var(--display-ls);
  text-transform: var(--display-transform);
}
.gg-kicker {
  font-family: var(--font-mono);
  font-weight: var(--label-weight);
  font-size: var(--label-size);
  letter-spacing: var(--label-ls);
  text-transform: var(--label-transform);
}
.gg-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 7rem;
  --space-12: 9rem;

  --radius-none: 0px;
  --radius-xs:  3px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);
  --radius-control: var(--radius-sm);

  --bw-hair: 1px;
  --bw-1:    2px;
  --bw-2:    3px;
  --bw-3:    4px;

  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --gutter: var(--space-5);
}

:root {
  --shadow-hard-sm: 2px 2px 0 var(--navy-900);
  --shadow-hard:    4px 4px 0 var(--navy-900);
  --shadow-hard-lg: 6px 6px 0 var(--navy-900);
  --shadow-pop:     4px 4px 0 var(--yellow);

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.28);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.34);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.44);
  --shadow-xl: 0 26px 64px rgba(0,0,0,0.5);
  --shadow-xs: var(--shadow-sm);

  --tilt-sm:  -2deg;
  --tilt:     -4deg;
  --tilt-lg:  -7deg;
  --tilt-pos:  3deg;
  --tilt-pos-lg: 6deg;

  --focus-ring-width: 3px;
  --focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);

  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:   cubic-bezier(0.34, 1.7, 0.5, 1);
  --dur-fast:  110ms;
  --dur-base:  190ms;
  --dur-slow:  340ms;

  --grid-line: rgba(244,244,239,0.05);
  --grid-bg:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --grid-unit: 40px;

  --blur-sm: 6px;
  --blur-md: 14px;
  --glass-navy: rgba(34,40,49,0.62);
  --glass-border: rgba(244,244,239,0.22);
  --glass-highlight: rgba(244,244,239,0.07);
}

.gg-glass {
  background: linear-gradient(var(--glass-highlight), transparent 45%), var(--glass-navy);
  -webkit-backdrop-filter: blur(var(--blur-md));
          backdrop-filter: blur(var(--blur-md));
  border: 2px solid var(--glass-border);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font-mono);
  font-weight: var(--body-weight);
  font-size: var(--text-base);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-weight: var(--heading-weight);
  line-height: var(--heading-lh);
  letter-spacing: var(--heading-ls);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

strong, b { font-weight: var(--fw-bold); }

code, kbd, samp, pre { font-family: var(--font-mono); }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--yellow); color: var(--navy-700); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

img, svg, video { display: block; max-width: 100%; }

hr {
  border: none;
  border-top: var(--bw-1) solid var(--border);
  margin: var(--space-6) 0;
}

/* ---- Button ---- */
.gg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.55em;
  font-family:var(--font-mono); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; line-height:1; white-space:nowrap;
  border:var(--bw-2) solid transparent; background:var(--yellow); color:var(--navy-700);
  border-radius:var(--radius-control); cursor:pointer; text-decoration:none;
  box-shadow:var(--shadow-hard-sm);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.gg-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.gg-btn:hover{ transform:translate(-1px,-1px); box-shadow:var(--shadow-hard); }
.gg-btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 transparent; }
.gg-btn[disabled],.gg-btn[aria-disabled="true"]{ opacity:0.4; cursor:not-allowed; pointer-events:none; }
.gg-btn__icon{ display:inline-flex; }
.gg-btn__icon svg{ width:1.1em; height:1.1em; stroke-width:2.4; }
.gg-btn--sm{ height:36px; padding:0 14px; font-size:12px; }
.gg-btn--md{ height:46px; padding:0 22px; font-size:13.5px; }
.gg-btn--lg{ height:56px; padding:0 30px; font-size:15px; }
.gg-btn--full{ width:100%; }
.gg-btn--primary{ background:var(--yellow); color:var(--navy-700); border-color:var(--navy-900); }
.gg-btn--accent{ background:var(--mint); color:var(--navy-700); border-color:var(--navy-900); }
.gg-btn--secondary{ background:transparent; color:var(--text-strong); border-color:var(--border-strong); box-shadow:none; }
.gg-btn--secondary:hover{ background:var(--surface-card); border-color:var(--text-strong); transform:translate(-1px,-1px); box-shadow:var(--shadow-hard-sm); }
.gg-btn--secondary:active{ transform:translate(1px,1px); box-shadow:none; }
.gg-btn--ghost{ background:transparent; color:var(--text-strong); border-color:transparent; box-shadow:none; }
.gg-btn--ghost:hover{ background:var(--surface-card); transform:none; box-shadow:none; }
.gg-btn--ghost:active{ transform:translate(1px,1px); }

/* ---- Badge ---- */
.gg-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-weight:700; text-transform:uppercase;
  font-size:10.5px; letter-spacing:0.1em; line-height:1;
  padding:5px 9px; border-radius:var(--radius-xs);
  border:var(--bw-1) solid transparent; background:var(--surface-raised); color:var(--text-strong);
  white-space:nowrap;
}
.gg-badge--pill{ border-radius:var(--radius-pill); }
.gg-badge__dot{ width:7px; height:7px; border-radius:999px; background:currentColor; }
.gg-badge--neutral{ background:transparent; color:var(--text-muted); border-color:var(--border-strong); }
.gg-badge--yellow{ background:var(--yellow); color:var(--navy-700); border-color:var(--navy-900); }
.gg-badge--mint{ background:var(--mint); color:var(--navy-700); border-color:var(--navy-900); }
.gg-badge--teal{ background:var(--teal); color:var(--navy-900); border-color:var(--navy-900); }
.gg-badge--coral{ background:var(--coral); color:var(--paper); border-color:var(--navy-900); }
.gg-badge--outline{ background:transparent; color:var(--text-strong); border-color:var(--border-strong); }

/* ---- Kicker ---- */
.gg-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-weight:700;
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-muted); line-height:1;
}
.gg-kicker--yellow{ color:var(--yellow); }
.gg-kicker--mint{ color:var(--mint); }
.gg-kicker--teal{ color:var(--teal); }
.gg-kicker--faint{ color:var(--text-faint); }
.gg-kicker--coral{ color: var(--coral); }
.gg-kicker__rule{ width:26px; height:3px; background:currentColor; }

/* ---- Card ---- */
.gg-card{
  position:relative; background:var(--surface-card);
  border:var(--bw-1) solid var(--border); border-radius:var(--radius-card);
  color:var(--text-body);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.gg-card--pad{ padding:var(--space-5); }
.gg-card--hard{ box-shadow:var(--shadow-hard); }
.gg-card--interactive{ cursor:pointer; }
.gg-card--interactive:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-hard); border-color:var(--border-strong); }
.gg-card--interactive:active{ transform:translate(0,0); box-shadow:var(--shadow-hard-sm); }
.gg-card__label{
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:var(--space-3);
}

/* ---- Input ---- */
.gg-field{ display:flex; flex-direction:column; gap:7px; }
.gg-field__label{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.gg-field__wrap{ position:relative; display:flex; align-items:center; }
.gg-field__icon{ position:absolute; left:13px; display:inline-flex; color:var(--text-faint); pointer-events:none; }
.gg-field__icon svg{ width:17px; height:17px; stroke-width:2.2; }
.gg-input, .gg-select, .gg-textarea{
  width:100%; height:46px; padding:0 14px;
  font-family:var(--font-mono); font-size:14px; color:var(--text-strong);
  background:var(--surface-sunk); border:var(--bw-1) solid var(--border-strong);
  border-radius:var(--radius-control); outline:none;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.gg-textarea{ height:auto; min-height:96px; padding:12px 14px; resize:vertical; }
.gg-input::placeholder, .gg-textarea::placeholder{ color:var(--text-faint); }
.gg-field--icon .gg-input{ padding-left:38px; }
.gg-input:hover, .gg-select:hover, .gg-textarea:hover{ border-color:var(--text-muted); }
.gg-input:focus, .gg-select:focus, .gg-textarea:focus{ border-color:var(--yellow); box-shadow:0 0 0 3px rgba(251,204,66,0.25); }
.gg-field--error .gg-input{ border-color:var(--coral); }
.gg-field--error .gg-input:focus{ box-shadow:0 0 0 3px rgba(255,89,90,0.25); }
.gg-input:disabled{ opacity:0.5; cursor:not-allowed; }
.gg-field__hint{ font-size:12px; color:var(--text-faint); }
.gg-field--error .gg-field__hint{ color:var(--coral); }

/* ---- Switch ---- */
.gg-switch{ display:inline-flex; align-items:center; gap:11px; cursor:pointer; user-select:none; }
.gg-switch__track{
  position:relative; width:46px; height:26px; flex:none;
  background:var(--surface-sunk); border:var(--bw-1) solid var(--border-strong);
  border-radius:var(--radius-pill);
  transition:background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.gg-switch__thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px;
  background:var(--text-muted); border-radius:999px;
  transition:transform var(--dur-base) var(--ease-pop), background var(--dur-base) var(--ease-out);
}
.gg-switch__label{ font-family:var(--font-mono); font-size:13.5px; color:var(--text-body); }
.gg-switch input{ position:absolute; opacity:0; width:0; height:0; }
.gg-switch input:checked + .gg-switch__track{ background:var(--yellow); border-color:var(--navy-900); }
.gg-switch input:checked + .gg-switch__track .gg-switch__thumb{ transform:translateX(20px); background:var(--navy-900); }
.gg-switch input:focus-visible + .gg-switch__track{ box-shadow:var(--focus-ring); }
.gg-switch--disabled{ opacity:0.45; cursor:not-allowed; }

/* ---- Sticker (signature spice) ---- */
.gg-sticker{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--font-mono); font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; line-height:1.12; color:var(--navy-700);
  background:var(--yellow); border:var(--bw-3) solid var(--navy-900);
  padding:12px 18px; border-radius:var(--radius-pill);
  transform:rotate(var(--tilt)); transform-origin:center;
  box-shadow:var(--shadow-hard-sm);
  transition:transform var(--dur-base) var(--ease-pop), box-shadow var(--dur-base) var(--ease-out);
  user-select:none;
}
.gg-sticker--interactive{ cursor:pointer; }
.gg-sticker--interactive:hover{ transform:rotate(0deg) scale(1.05); box-shadow:var(--shadow-hard); }
.gg-sticker--sm{ font-size:11px; padding:8px 12px; border-width:var(--bw-2); }
.gg-sticker--md{ font-size:13px; padding:12px 18px; }
.gg-sticker--lg{ font-size:17px; padding:18px 26px; }
.gg-sticker[data-tilt="left"]{ --tilt:-6deg; }
.gg-sticker[data-tilt="right"]{ --tilt:5deg; }
.gg-sticker[data-tilt="none"]{ --tilt:0deg; }
.gg-sticker--yellow{ background:var(--yellow); color:var(--navy-700); }
.gg-sticker--mint{ background:var(--mint); color:var(--navy-700); }
.gg-sticker--teal{ background:var(--teal); color:var(--navy-900); }
.gg-sticker--coral{ background:var(--coral); color:var(--paper); }
.gg-sticker--navy{ background:var(--navy-700); color:var(--paper); border-color:var(--paper); }
.gg-sticker--paper{ background:var(--paper); color:var(--navy-700); }
.gg-sticker--pill{ border-radius:var(--radius-pill); }
.gg-sticker--square{ border-radius:var(--radius-sm); }
.gg-sticker--circle{ border-radius:50%; aspect-ratio:1; padding:18px; min-width:0; }
.gg-sticker--oval{ border-radius:50%/60%; padding:14px 28px; }
.gg-sticker--tag{ border-radius:var(--radius-sm); position:relative; padding-left:30px; }
.gg-sticker--tag::before{
  content:""; position:absolute; left:12px; top:50%; width:9px; height:9px;
  border-radius:50%; background:transparent; border:var(--bw-2) solid currentColor; transform:translateY(-50%);
}
.gg-sticker--burst, .gg-sticker--triangle{
  border:none; box-shadow:none; border-radius:0;
  filter:
    drop-shadow(3px 0 0 var(--navy-900)) drop-shadow(-3px 0 0 var(--navy-900))
    drop-shadow(0 3px 0 var(--navy-900)) drop-shadow(0 -3px 0 var(--navy-900))
    drop-shadow(3px 4px 0 rgba(0,0,0,0.35));
}
.gg-sticker--burst.gg-sticker--navy, .gg-sticker--triangle.gg-sticker--navy{
  filter:
    drop-shadow(3px 0 0 var(--paper)) drop-shadow(-3px 0 0 var(--paper))
    drop-shadow(0 3px 0 var(--paper)) drop-shadow(0 -3px 0 var(--paper));
}
.gg-sticker--burst{
  clip-path:polygon(50% 0%,61% 13%,79% 8%,79% 27%,97% 30%,87% 45%,100% 58%,84% 65%,90% 84%,
    71% 81%,64% 99%,50% 88%,36% 99%,29% 81%,10% 84%,16% 65%,0% 58%,13% 45%,3% 30%,21% 27%,21% 8%,39% 13%);
  aspect-ratio:1; padding:30px;
}
.gg-sticker--triangle{
  clip-path:polygon(50% 4%, 96% 92%, 4% 92%); padding:26px 22px 14px;
  align-items:flex-end; aspect-ratio:1.15;
}