/* ==========================================================================
   Flippey Design System — Colors & Type
   Dark, calm, focused. One warm accent. Frosted surfaces, hairline borders.
   ========================================================================== */

/* ---------- Fonts ---------- */
/* Satoshi — display + body. JetBrains Mono — code.
   Loaded from Fontshare / Google as a substitute until ttf files are provided. */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Base palette ---------- */
  /* Near-black backgrounds with subtle warmth (a hint of orange in the shadows) */
  --ink-0:        #0A0908;  /* page base — deepest */
  --ink-1:        #121110;  /* primary surface */
  --ink-2:        #1A1817;  /* raised panel */
  --ink-3:        #22201E;  /* hover / active panel */
  --ink-4:        #2B2926;  /* highest elevation */

  /* Foreground neutrals — slightly warm whites */
  --fg-1:         #F5F3F0;  /* primary text */
  --fg-2:         #B8B3AC;  /* secondary text */
  --fg-3:         #7A766F;  /* tertiary / muted */
  --fg-4:         #4A4742;  /* disabled / hint */

  /* Hairline borders — barely-there, warm-tinted */
  --line-1:       rgba(245, 243, 240, 0.06);  /* default hairline */
  --line-2:       rgba(245, 243, 240, 0.10);  /* emphasized border */
  --line-3:       rgba(245, 243, 240, 0.16);  /* focus ring edge */

  /* ---------- Accent — Flippey Orange ---------- */
  --orange-300:   #FFB380;  /* hover tint on text */
  --orange-400:   #FF9553;  /* lighter accent */
  --orange-500:   #FF7A2B;  /* primary accent */
  --orange-600:   #E8631A;  /* press / darker */
  --orange-700:   #B44A10;  /* deep accent for borders */
  --orange-glow:  rgba(255, 122, 43, 0.35); /* for soft top glow + shadows */

  /* ---------- Semantic ---------- */
  --success:      #4ADE80;
  --warning:      #FFB454;
  --danger:       #F87171;
  --info:         #60A5FA;

  /* Semantic role tokens */
  --bg:           var(--ink-0);
  --surface:      var(--ink-1);
  --surface-raised: var(--ink-2);
  --surface-hover: var(--ink-3);
  --fg:           var(--fg-1);
  --fg-muted:     var(--fg-2);
  --fg-subtle:    var(--fg-3);
  --accent:       var(--orange-500);
  --accent-hover: var(--orange-400);
  --accent-press: var(--orange-600);
  --border:       var(--line-1);
  --border-strong: var(--line-2);

  /* Frosted surface — semi-transparent over a blurred backdrop */
  --frost-bg:     rgba(26, 24, 23, 0.72);
  --frost-blur:   saturate(140%) blur(18px);

  /* ---------- Shadows (depth, not outline) ---------- */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 6px 20px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lg:    0 20px 50px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-xl:    0 40px 90px rgba(0,0,0,0.6), 0 4px 10px rgba(0,0,0,0.5);
  /* Accent glow — used behind buttons and at top of page */
  --shadow-glow:  0 8px 32px rgba(255,122,43,0.28), 0 2px 8px rgba(255,122,43,0.18);
  --shadow-inset-hairline: inset 0 1px 0 rgba(255,255,255,0.04);

  /* ---------- Radii ---------- */
  --r-xs:         4px;
  --r-sm:         6px;
  --r-md:         10px;
  --r-lg:         14px;
  --r-xl:         20px;
  --r-2xl:        28px;
  --r-full:       999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --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;
  --s-20: 80px;
  --s-24: 96px;

  /* ---------- Motion ---------- */
  /* Quick, physical. Button press = 90ms scale-down. */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant:  90ms;
  --dur-fast:     140ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* ---------- Type ---------- */
  --font-display: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Satoshi', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — larger than typical to feel confident in dark UI */
  --t-display:    clamp(48px, 6vw, 88px);  /* hero */
  --t-h1:         clamp(36px, 4vw, 56px);
  --t-h2:         32px;
  --t-h3:         24px;
  --t-h4:         19px;
  --t-body-lg:    18px;
  --t-body:       15px;
  --t-small:      13px;
  --t-micro:      11px;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  --tr-tight:     -0.02em;   /* display */
  --tr-snug:      -0.01em;   /* headings */
  --tr-normal:    0;
  --tr-wide:      0.02em;    /* uppercase labels */
}

/* ==========================================================================
   Semantic element styles — opinionated defaults.
   Use these directly where possible, or layer component classes on top.
   ========================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  color: var(--fg);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  color: var(--fg);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
  color: var(--fg);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
  color: var(--fg);
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg);
}
p, .t-body {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
  text-wrap: pretty;
}
.t-body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}
.t-small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}
.t-micro, .t-eyebrow {
  font-size: var(--t-micro);
  line-height: 1.2;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-weight: 500;
}
code, kbd, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: 'calt', 'liga';
}
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--orange-300);
  border-bottom-color: var(--orange-500);
}

/* ---------- Utility: frosted surface ---------- */
.surface-frost {
  background: var(--frost-bg);
  -webkit-backdrop-filter: var(--frost-blur);
  backdrop-filter: var(--frost-blur);
  border: 1px solid var(--line-1);
  box-shadow: var(--shadow-md), var(--shadow-inset-hairline);
  border-radius: var(--r-lg);
}

/* ---------- Top-of-page glow ---------- */
.page-glow::before {
  content: "";
  position: fixed;
  top: -320px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 600px;
  background: radial-gradient(ellipse at center,
              var(--orange-glow) 0%,
              rgba(255,122,43,0.08) 40%,
              transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}