/* ============================================================
   The Fly Trap — colors_and_type.css
   Single source of truth for color + type tokens used by the
   design-system previews and UI kits in this project.
   Mirrors the Tailwind v4 @theme block in
   /flytrap-website/src/app/globals.css.
   ============================================================ */

/* ============================================================
   Webfonts
   - Fraunces (display) and Inter (body) are self-hosted brand
     files in /fonts/ uploaded by the brand owner.
   - Caveat (script accent, tagline only) is still pulled from
     Google Fonts; flag if/when a self-hosted file is provided.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600&display=swap');

/* ---- Inter (body) ---- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/inter-v20-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-v20-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-v20-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-v20-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-v20-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-v20-latin-900.woff2') format('woff2');
}

/* ---- Fraunces (display) ---- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/fraunces-v38-latin-900.woff2') format('woff2');
}

:root {
  /* ====== PRIMARY BRAND REDS ====== */
  --color-flytrap-red-deep:   #FD0003;  /* marble bar epoxy matrix — primary brand red, CTAs */
  --color-flytrap-red-bright: #FD0003;  /* dining-room wall — hero impact (TBD on return visit) */

  /* ====== WALL ZONES (6-wall expanded model) ====== */
  --color-cream-paper:    #FFFFFF;  /* default page canvas, body sections, menu cards */
  --color-butter-yellow:  #C8B880;  /* solid butter wall — warm/inviting sections */
  --color-chartreuse:     #C8B000;  /* atomic-pendant back-bar — high-energy accents */
  --color-terracotta:     #D88858;  /* burnt-orange wall — loud sections (about, press) */
  --color-plum:           #685050;  /* ceramic-jacks room — dark callouts */
  --color-navy-slate:     #383838;  /* chalkboard-menu wall — footer, dark contrast */
  --color-back-bar-mauve: #6A6A6E;  /* Joe Strummer back-bar — mid-tone neutrals */
  --color-checker-black:  #000000;  /* floor / structural — text, borders */

  /* ====== SEMANTIC TEXT ====== */
  --color-text-ink:      #1A1A1A;   /* body, headings */
  --color-text-charcoal: #4A4A4E;   /* secondary copy */
  --color-text-light:    #FFFFFF;   /* text on dark bg */

  /* ====== SEMANTIC BG ====== */
  --color-bg-white:     #FFFFFF;
  --color-bg-off-white: #F5EEDC;

  /* ====== MARBLE JEWEL TONES (decorative ONLY — never solid fills) ====== */
  --color-marble-ruby:        #C00A1A;
  --color-marble-ultramarine: #0A2A66;
  --color-marble-emerald:     #00664C;
  --color-marble-gold:        #D4A574;
  --color-marble-plum:        #6B4C7A;
  --color-marble-teal:        #00A39C;
  --color-marble-jade:        #2D9C7E;
  --color-marble-white:       #F5F5F5;

  /* ====== FONT FAMILIES ====== */
  --font-serif:  'Fraunces', 'Recoleta', Georgia, serif;
  --font-sans:   'Inter', 'Figtree', system-ui, sans-serif;
  --font-script: 'Caveat', 'Reenie Beanie', cursive;

  /* ====== TYPE SCALE (desktop) ====== */
  --text-h1: 48px;        --lh-h1: 1.2;
  --text-h2: 36px;        --lh-h2: 1.3;
  --text-h3: 28px;        --lh-h3: 1.4;
  --text-h4: 24px;        --lh-h4: 1.4;
  --text-body-lg:   18px; --lh-body-lg:   1.6;
  --text-body-base: 16px; --lh-body-base: 1.6;
  --text-body-sm:   14px; --lh-body-sm:   1.5;
  --text-caption:   12px; --lh-caption:   1.4;

  /* ====== SPACING (8px grid) ====== */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* ====== RADIUS ====== */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* ====== SHADOWS ====== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.10);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.20);

  /* ====== MOTION ====== */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.4, 1);

  /* ====== DECORATIVE GRADIENT ====== */
  --gradient-marble-halftone: linear-gradient(135deg, rgba(200,10,26,.15), rgba(212,165,116,.15));
}

/* ====== Mobile down-scale (~15-20% under 640px) ====== */
@media (max-width: 640px) {
  :root {
    --text-h1: 40px;
    --text-h2: 30px;
    --text-h3: 24px;
    --text-h4: 20px;
    --text-body-lg:   16px;
    --text-body-base: 14px;
    --text-body-sm:   12px;
    --text-caption:   11px;
    --space-6: 32px;
    --space-8: 48px;
  }
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Drop this CSS in alongside any Fly Trap artifact and these
   element selectors come pre-styled to the brand.
   ============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-base);
  line-height: var(--lh-body-base);
  color: var(--color-text-ink);
  background: var(--color-cream-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;        /* Fraunces semi-bold reads warmer than 700 at display sizes */
  color: var(--color-flytrap-red-deep);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; }
h2 { font-size: var(--text-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--text-h3); line-height: var(--lh-h3); }
h4 { font-size: var(--text-h4); line-height: var(--lh-h4); }

p   { margin: 0; text-wrap: pretty; }
small,
.caption { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--color-text-charcoal); }

a {
  color: var(--color-flytrap-red-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-flytrap-red-bright); }

/* Tagline / signature accent — Caveat ONLY here */
.tagline,
.script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: 1.4em;
  line-height: 1;
  color: var(--color-flytrap-red-deep);
}

/* Wordmark display — Fraunces tight, lowercase, deep red */
.wordmark {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;          /* Fraunces italic is slightly slabbed — matches menu lettering */
  font-variation-settings: "opsz" 144, "SOFT" 100;
  letter-spacing: -0.02em;
  color: var(--color-flytrap-red-deep);
  text-transform: lowercase;
  line-height: 1;
}

/* Checkerboard border (universal motif) */
.checker-border {
  --c1: var(--color-checker-black);
  --c2: var(--color-cream-paper);
  background:
    linear-gradient(45deg, var(--c1) 25%, transparent 25%, transparent 75%, var(--c1) 75%) 0 0 / 16px 16px,
    linear-gradient(45deg, var(--c1) 25%, transparent 25%, transparent 75%, var(--c1) 75%) 8px 8px / 16px 16px,
    var(--c2);
}