/* ============================================================
 * Craft Digital — Colors & Typography
 * ============================================================
 * Source of truth for all brand tokens. All colors in HSL to
 * match the production codebase (Tailwind + shadcn). Consumers
 * can compose with hsl(var(--token)) or hsl(var(--token) / 0.5).
 * ============================================================ */

/* Gochi Hand via Google Fonts (personality-only accent — rarely used).
   @import must precede @font-face per spec. */
@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&display=swap');

/* Inter — self-hosted variable fonts (licensed). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}

:root {
  /* ────────────────────────── CORE PALETTE ────────────────────────── */

  /* Warm cream background, near-black cool text — the signature
     "light-mode" state for the marketing site. */
  --background: 39 40% 96%;        /* #F7F4F0 cream */
  --foreground: 220 20% 15%;       /* #1F2937 near-black */

  --card: 39 35% 93%;              /* #EDE8E0 card cream */
  --card-foreground: 220 20% 15%;

  --popover: 0 0% 100%;            /* white */
  --popover-foreground: 220 20% 15%;

  /* Primary — deep forest green. The single hero accent; used on
     CTAs, links, status indicators, focus rings. */
  --primary: 152 48% 17%;          /* #15402B */
  --primary-foreground: 0 0% 100%;

  --secondary: 39 30% 90%;         /* lifted cream */
  --secondary-foreground: 220 20% 20%;

  --muted: 39 25% 88%;             /* subtle surface */
  --muted-foreground: 220 10% 45%;

  --accent: 160 20% 75%;           /* sage — low-sat highlights */
  --accent-foreground: 220 20% 15%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;

  --border: 39 20% 85%;
  --input: 39 20% 85%;
  --ring: 152 48% 17%;

  /* ────────────────────────── EXTENDED BRAND ───────────────────────── */
  --brand-green: 152 48% 17%;        /* canonical primary */
  --brand-green-light: 152 40% 25%;  /* hover / lift */
  --brand-teal: 160 50% 45%;         /* teal-emerald accent */
  --brand-teal-light: 160 50% 55%;   /* glow gradient top */
  --brand-teal-deep: 170 50% 45%;    /* glow gradient bottom */
  --brand-beige: 39 24% 92%;
  --brand-offwhite: 36 44% 95%;
  --brand-cream: 39 40% 94%;
  --brand-peach: 30 50% 92%;
  --brand-sage: 160 20% 75%;
  --brand-grey: 120 7% 80%;
  --brand-dark-brown: 18 64% 32%;
  --brand-light-brown: 29 56% 60%;
  --brand-orange: 25 90% 55%;
  --brand-amber: 35 80% 55%;         /* terminal amber, kickers */

  /* Semantic status — used in status pills, terminal dots, monitor UIs */
  --success: 143 55% 50%;            /* terminal green */
  --warning: 40 85% 55%;             /* terminal amber */
  --danger:   0 70% 55%;             /* terminal red */
  --info:   180 45% 50%;             /* sync cyan */

  /* Terminal / chrome surfaces (dark sections) */
  --terminal-bg: 140 10% 5%;         /* #0c0f0d */
  --terminal-bg-elev: 140 12% 7%;    /* #111814 */
  --ink-0: 0 0% 3%;                  /* #0a0a0a page */
  --ink-1: 155 40% 5%;               /* #0a1510 */
  --ink-2: 158 36% 7%;               /* #0d1812 */
  --ink-3: 155 60% 6%;               /* #0d1f18 */

  /* Surface tokens */
  --surface: 39 35% 93%;
  --surface-elevated: 0 0% 100%;
  --glow: 152 48% 17%;

  /* ────────────────────────── TYPOGRAPHY ───────────────────────────── */
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;
  --font-accent:  'Gochi Hand', cursive; /* personality-only accent */

  /* Type scale — matches tailwind.config.ts fontSize */
  --fs-display:   4.5rem;   /* 72px */
  --fs-h1:        3.5rem;   /* 56px */
  --fs-h2:        2.5rem;   /* 40px */
  --fs-h3:        1.875rem; /* 30px */
  --fs-h4:        1.5rem;   /* 24px */
  --fs-h5:        1.25rem;  /* 20px */
  --fs-h6:        1.125rem; /* 18px */
  --fs-body-lg:   1.125rem; /* 18px */
  --fs-body:      1rem;     /* 16px */
  --fs-body-sm:   0.875rem; /* 14px */
  --fs-caption:   0.75rem;  /* 12px */
  --fs-micro:     0.6875rem;/* 11px — terminal labels, kickers */

  /* Leading / tracking */
  --lh-display: 1.1;
  --lh-h1: 1.15;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-body: 1.75;
  --tr-tight: -0.02em;
  --tr-wide: 0.15em;

  /* ────────────────────────── SPACING GRID ─────────────────────────── */
  /* 8px base. Use --space-* tokens or rem multiples of 0.25. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1280px;

  /* ────────────────────────── RADII ────────────────────────────────── */
  --radius: 0.75rem;           /* default — cards, inputs */
  --radius-sm: 0.375rem;       /* badges, tags */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;           /* buttons (lg), surfaces */
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;       /* pills, status chips */

  /* ────────────────────────── SHADOWS ──────────────────────────────── */
  --shadow-sm: 0 2px 8px -2px hsl(220 30% 10% / 0.08);
  --shadow-md: 0 8px 24px -4px hsl(220 30% 10% / 0.12);
  --shadow-lg: 0 16px 48px -8px hsl(220 30% 10% / 0.15);
  --shadow-2xl: 0 25px 50px -12px hsl(220 30% 10% / 0.25);

  /* Brand-tinted glows — used on CTAs and hover-lifted cards */
  --shadow-glow:        0 0 40px -10px hsl(var(--primary) / 0.2);
  --shadow-glow-strong: 0 0 60px -10px hsl(var(--primary) / 0.3);
  --shadow-glow-teal:   0 0 30px -5px hsl(var(--brand-teal-light) / 0.4);

  /* ────────────────────────── GLASS ────────────────────────────────── */
  --glass-bg: hsl(0 0% 100% / 0.9);
  --glass-bg-dark: hsl(140 10% 5% / 0.9);
  --glass-border: hsl(var(--primary) / 0.15);
  --glass-border-dark: hsl(0 0% 100% / 0.08);
  --glass-blur: 16px;

  /* ────────────────────────── GRADIENTS ────────────────────────────── */
  /* Signature dark-section gradient — layered near-black into deep green */
  --gradient-dark: linear-gradient(180deg, #0a0a0a 0%, #0a1510 50%, #0d1812 100%);
  --gradient-dark-deep: linear-gradient(180deg, #050505 0%, #0d1f18 50%, #0a1510 100%);
  /* Teal emphasis gradient — used on CTAs, text highlights */
  --gradient-teal: linear-gradient(135deg, hsl(160 50% 55%) 0%, hsl(170 50% 45%) 100%);
  /* Primary brand gradient — forest green to teal */
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(174 72% 60%) 100%);
  /* Topographic overlay fade */
  --gradient-topo-fade: linear-gradient(to right,
    transparent,
    hsl(var(--brand-teal) / 0.3),
    transparent);

  /* ────────────────────────── MOTION ───────────────────────────────── */
  --ease-out-quint: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-reveal: 800ms;
}

/* ================================================================
 * SEMANTIC / ELEMENT STYLES
 * Compose-in helpers. Not opinionated globals — wrap with a class.
 * ================================================================ */

.cd-prose {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: hsl(var(--foreground));
}

.cd-prose h1, .cd-h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  color: hsl(var(--foreground));
}
.cd-prose h2, .cd-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.01em;
  font-weight: 700;
}
.cd-prose h3, .cd-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: 700;
}
.cd-prose h4, .cd-h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-h4);
  line-height: 1.4;
  font-weight: 600;
}
.cd-display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
}
.cd-kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: hsl(var(--brand-amber) / 0.85);
}
.cd-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
}
.cd-accent {
  /* Gochi Hand — reserved for small personality accents. Use sparingly. */
  font-family: var(--font-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cd-caption {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* Teal text-gradient — for emphasized words inside headlines */
.cd-text-teal {
  background: var(--gradient-teal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hover lift pattern — cards */
.cd-hover-lift {
  transition: transform var(--dur-base) var(--ease-out-quint),
              box-shadow var(--dur-base) var(--ease-out-quint),
              border-color var(--dur-base) var(--ease-out-quint);
}
.cd-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}