/* ============================================================
   PERKD DESIGN SYSTEM — Core foundations
   Colors, typography, spacing, shadows, radii.
   Source of truth: perkd-brand SKILL.md + CAFE-COLLECTION.md
   ============================================================ */

/* ---------- Melbourne (brand typeface) ---------- */
@font-face {
  font-family: 'Melbourne';
  src: url('fonts/melbourne-thin.ttf') format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Melbourne';
  src: url('fonts/melbourne-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Melbourne';
  src: url('fonts/melbourne-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — Primary brand
     ============================================================ */
  --perkd-yellow:        #FFB800;   /* canonical primary */
  --perkd-yellow-alt:    #FDB913;   /* older print variant */
  --perkd-yellow-ink:    #3D3D3D;   /* text that sits ON yellow */
  --perkd-dark:          #3D3D3D;   /* brand dark gray */
  --perkd-black:         #1C1510;   /* espresso-900, strongest */

  /* ============================================================
     COLOR — Supporting (app accents: per-brand tiles)
     ============================================================ */
  --perkd-green:   #2E6B16;   /* success, eco, bonus — darkened for AA contrast */
  --perkd-pink:    #E8A1A5;   /* beauty / wellness */
  --perkd-red:     #E63946;   /* athletic, warnings */
  --perkd-blue:    #0F5AA8;   /* informational — darkened for AA contrast */
  --perkd-mint:    #4ED9B2;   /* secondary price accent */

  /* ============================================================
     COLOR — Neutrals (project-level gray scale)
     Cool/neutral — replaces the earlier warm espresso scale.
     Kept under --espresso-* names for token stability.
     ============================================================ */
  --espresso-50:  #F8F8F9;
  --espresso-100: #F1F1F3;
  --espresso-200: #E4E4E8;
  --espresso-300: #CDCDD3;
  --espresso-400: #A5A5AE;
  --espresso-500: #7A7A83;
  --espresso-600: #5A5A63;
  --espresso-700: #42424A;
  --espresso-800: #2C2C32;
  --espresso-900: #1B1B20;
  --espresso-950: #0D0D10;

  /* ============================================================
     COLOR — Semantic (app)
     ============================================================ */
  --bg-app:        #1B1B20;        /* Perkd app dark chrome */
  --bg-surface:    #2C2C32;        /* Cards on app bg */
  --bg-card:       #FFFFFF;        /* light UI card */
  --bg-page:       #FFFFFF;        /* clean white */
  --bg-muted:      #F1F1F3;        /* neutral-100 */

  --fg-on-yellow:  #1B1B20;
  --fg-on-dark:    #FFFFFF;
  --fg1:           #1B1B20;        /* primary text */
  --fg2:           #42424A;        /* emphasized secondary */
  --fg3:           #5A5A63;        /* muted body */
  --fg4:           #A5A5AE;        /* disabled / caption */
  --fg-inverse:    #FFFFFF;

  --border-1:      #E4E4E8;        /* neutral-200 */
  --border-2:      #CDCDD3;        /* neutral-300 */
  --border-strong: #1B1B20;

  --success:       #2E6B16;
  --warning:       #FFB800;
  --danger:        #E63946;
  --info:          #0F5AA8;

  /* Badge tokens — per-SKILL */
  --badge-redeemed-bg: #6B6B6B;
  --badge-redeemed-fg: #FFFFFF;
  --badge-demo-bg:     #FFB800;
  --badge-demo-fg:     #1C1510;
  --badge-new-bg:      #2E6B16;
  --badge-new-fg:      #FFFFFF;
  --badge-expires-bg:  #E63946;
  --badge-expires-fg:  #FFFFFF;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans: 'Melbourne', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-display: 'Melbourne', system-ui, sans-serif;   /* same family, bigger */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fw-thin:    100;
  --fw-light:   300;
  --fw-regular: 400;
  /* Weight ladder intentionally tops out at Regular (400).
     Hierarchy is built with size + tracking, not bold. */

  /* Type scale — mobile-first, minimum 14px per accessibility */
  --fs-12:  12px;  /* micro — legal, tag labels */
  --fs-14:  14px;  /* small / caption */
  --fs-16:  16px;  /* body */
  --fs-18:  18px;  /* body large */
  --fs-20:  20px;  /* card title */
  --fs-24:  24px;  /* h2 */
  --fs-28:  28px;  /* h1 (mobile) */
  --fs-36:  36px;  /* h1 (large) */
  --fs-48:  48px;  /* display */
  --fs-64:  64px;  /* display large */
  --fs-96:  96px;  /* editorial display */
  --fs-128: 128px; /* hero */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-body:  1.5;
  --lh-loose: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ============================================================
     RADII — cards 12–16, buttons 8–12, pills full
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   8px;    /* buttons */
  --radius-md:  12px;    /* buttons / small cards */
  --radius-lg:  16px;    /* cards */
  --radius-xl:  20px;    /* loyalty cards */
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — editorial / coffee / soft / glow
     ============================================================ */
  --shadow-card:       0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-soft:       0 8px 32px rgba(27, 27, 32, 0.08);
  --shadow-lift:       0 12px 32px rgba(27, 27, 32, 0.14);
  --shadow-editorial:  12px 12px 0 0 var(--espresso-900);
  --shadow-glow-yellow: 0 0 32px rgba(255, 184, 0, 0.35);
  --shadow-glow-blue:  0 0 32px rgba(74, 144, 226, 0.30);
  --shadow-inset-top:  inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    600ms;
  --dur-slower:  800ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --touch-min: 44px;       /* minimum hit target */
  --nav-h:     56px;
  --max-w:     1280px;
  --max-w-read: 640px;

  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* ============================================================
   SEMANTIC ELEMENTS — body defaults for artifacts.
   Any HTML that imports this gets readable, on-brand defaults.
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "ss01";
}

h1, .perkd-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-36);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h2, .perkd-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h3, .perkd-h3 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg1);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
p {
  margin: 0 0 var(--space-3);
  color: var(--fg2);
  text-wrap: pretty;
}
small, .perkd-caption {
  font-size: var(--fs-14);
  color: var(--fg3);
}
.perkd-eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--perkd-yellow-ink);
}
.perkd-display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--fs-48), 8vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.perkd-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  font-size: clamp(var(--fs-64), 12vw, var(--fs-128));
  line-height: 0.95;
  letter-spacing: -0.03em;
}
code, .perkd-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--espresso-100);
  color: var(--espresso-900);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}

/* ============================================================
   TEXT GRADIENT UTILITIES
   ============================================================ */
.text-gradient-ink {
  background: linear-gradient(135deg, var(--espresso-700), var(--espresso-900));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-brand {
  background: linear-gradient(135deg, var(--perkd-yellow) 0%, var(--perkd-yellow) 45%, var(--perkd-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gradient-primary {
  background: linear-gradient(135deg, #FFB800, #FFD166);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}