/* ============================================================================
   COPS COFFEE — Colors & Type
   ============================================================================
   Brand extension of COPS (the documentary television series, premiered 1989,
   Langley Productions / Fox Nation) into a Shopify e-commerce coffee brand.
   "Coffee With A Mission. Wake up like a hero. To sip and serve."
   ============================================================================ */

/* --- Webfonts (Google Fonts) ----------------------------------------------- */
/* SUBSTITUTIONS — flagged in README. The COPS logo on cops.com is a custom,
   distressed chrome wordmark; we substitute with strong condensed display
   faces below. Provide proper licensed brand fonts to replace these. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Black+Ops+One&display=swap');

:root {
  /* ========================================================================
     COLOR — Core brand
     ======================================================================== */

  /* Asphalt + ink: the world of the show. Almost everything sits on black. */
  --cops-black:        #08090B;    /* page background; deep, slightly cool */
  --cops-asphalt:      #14161A;    /* card/section surfaces on black */
  --cops-graphite:     #1F2329;    /* secondary surface, dividers on black */
  --cops-steel:        #2C323A;    /* tertiary surface, input chrome */

  /* Patrol lights: the signature red/blue duo, used SPARINGLY as accents. */
  --cops-blue:         #1955D6;    /* primary "patrol blue" — links, badges */
  --cops-blue-bright:  #2F7BFF;    /* light glow / focus halo */
  --cops-blue-deep:    #0A1F4A;    /* deep navy ground, hero washes */
  --cops-red:          #D7263D;    /* primary "patrol red" — alerts, CTAs */
  --cops-red-bright:   #FF3E55;    /* light glow */
  --cops-red-deep:     #6A0B1C;    /* deep oxblood, badges */

  /* Chrome / silver — the COPS wordmark palette */
  --cops-chrome-50:    #F3F5F7;    /* highlight */
  --cops-chrome-100:   #DDE2E8;
  --cops-chrome-200:   #B7BFC9;
  --cops-chrome-300:   #8A95A2;
  --cops-chrome-400:   #5E6772;
  --cops-chrome-500:   #3F464E;    /* mid */
  --cops-chrome-600:   #2A2F36;    /* shadow */

  /* Coffee — earned warmth, only on packaging + commerce surfaces */
  --cops-cream:        #F2E8D5;    /* roast-card paper */
  --cops-cream-deep:   #D8C9A8;    /* aged-paper accent */
  --cops-roast-light:  #B07A4C;    /* medium roast crema */
  --cops-roast-bold:   #4A2A18;    /* bold roast bean */
  --cops-espresso:     #1E0F08;    /* darkest brown */

  /* Tactical gold — used for badge stars, "DUTY" stripes, premium accents */
  --cops-gold:         #C8A24A;
  --cops-gold-bright:  #E8C56A;

  /* Hazard yellow — caution stripes, "OFFICIAL" markers */
  --cops-hazard:       #F2C12E;

  /* ========================================================================
     COLOR — Semantic (light-on-dark default)
     ======================================================================== */
  --bg:                var(--cops-black);
  --bg-elevated:       var(--cops-asphalt);
  --bg-elevated-2:     var(--cops-graphite);
  --bg-inset:          #050608;

  --fg:                #FFFFFF;
  --fg-1:              rgba(255,255,255,0.92);   /* primary text */
  --fg-2:              rgba(255,255,255,0.68);   /* secondary text */
  --fg-3:              rgba(255,255,255,0.44);   /* tertiary / meta */
  --fg-4:              rgba(255,255,255,0.24);   /* placeholder */

  --border:            rgba(255,255,255,0.08);
  --border-strong:     rgba(255,255,255,0.16);
  --border-hot:        var(--cops-red);
  --border-cold:       var(--cops-blue);

  --accent:            var(--cops-red);          /* primary CTA color */
  --accent-fg:         #FFFFFF;
  --accent-2:          var(--cops-blue);
  --link:              var(--cops-blue-bright);

  --success:           #2DBE7E;
  --warning:           var(--cops-hazard);
  --danger:            var(--cops-red);

  /* Cream surface (light theme used on commerce/product cards) */
  --cream-bg:          var(--cops-cream);
  --cream-fg:          var(--cops-espresso);
  --cream-fg-2:        #4A3522;
  --cream-border:      rgba(30,15,8,0.16);

  /* ========================================================================
     TYPE — Families
     ======================================================================== */
  /* Display / wordmark substitute. SUBSTITUTION (see README). */
  --font-display:      'Anton', 'Big Shoulders Display', 'Impact', sans-serif;
  /* Strong condensed headlines, eyebrows, badge text */
  --font-headline:     'Oswald', 'Bebas Neue', 'Roboto Condensed', sans-serif;
  /* Body, UI */
  --font-sans:         'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* Stencil / tactical — for case numbers, badge IDs */
  --font-stencil:      'Black Ops One', 'Stencil Std', 'Courier New', monospace;
  /* Monospace — case files, SKUs, receipts */
  --font-mono:         'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale (px) — generous, packaging-loud at the top */
  --t-display-2xl:     112px;     /* hero wordmark */
  --t-display-xl:      88px;
  --t-display-lg:      64px;
  --t-display-md:      48px;
  --t-display-sm:      36px;
  --t-h1:              40px;
  --t-h2:              28px;
  --t-h3:              22px;
  --t-h4:              18px;
  --t-body-lg:         18px;
  --t-body:            16px;
  --t-body-sm:         14px;
  --t-caption:         12px;
  --t-micro:           11px;      /* legal copy, fine print */

  /* Line heights */
  --lh-display:        0.92;
  --lh-tight:          1.05;
  --lh-snug:           1.2;
  --lh-normal:         1.5;
  --lh-loose:          1.65;

  /* Tracking — wide, militaristic on uppercase; tight on display */
  --ls-display-tight: -0.02em;
  --ls-normal:         0;
  --ls-wide:           0.08em;
  --ls-wider:          0.14em;
  --ls-widest:         0.22em;     /* "OFFICIAL ISSUE" all-caps */

  /* ========================================================================
     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;
  --space-32: 128px;

  /* ========================================================================
     RADII — mostly hard-edged. Coffee is a tactical product.
     ======================================================================== */
  --radius-0:  0;
  --radius-1:  2px;       /* badges, chips */
  --radius-2:  4px;       /* buttons */
  --radius-3:  8px;       /* cards */
  --radius-4:  12px;      /* large cards */
  --radius-pill: 999px;   /* status pills only */

  /* ========================================================================
     SHADOWS — used sparingly on dark; more on cream surfaces
     ======================================================================== */
  --shadow-flat:    0 1px 0 rgba(255,255,255,0.04) inset;
  --shadow-1:       0 1px 2px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4);
  --shadow-2:       0 4px 8px rgba(0,0,0,0.5), 0 16px 32px rgba(0,0,0,0.55);
  --shadow-3:       0 12px 48px rgba(0,0,0,0.65);
  --shadow-red-glow:   0 0 0 1px rgba(215,38,61,0.4), 0 0 24px rgba(215,38,61,0.45);
  --shadow-blue-glow:  0 0 0 1px rgba(25,85,214,0.45), 0 0 28px rgba(47,123,255,0.5);
  --shadow-cream-1: 0 1px 2px rgba(30,15,8,0.12), 0 4px 16px rgba(30,15,8,0.10);

  /* ========================================================================
     GRADIENTS — patrol-light washes (use sparingly, photographic blurs only)
     ======================================================================== */
  --grad-patrol:        radial-gradient(60% 80% at 18% 50%, rgba(215,38,61,0.35) 0%, transparent 60%),
                        radial-gradient(60% 80% at 82% 50%, rgba(25,85,214,0.40) 0%, transparent 60%),
                        linear-gradient(180deg, #05060A 0%, #08090B 100%);
  --grad-night:         linear-gradient(180deg, #0A1224 0%, #050608 100%);
  --grad-roast-bold:    linear-gradient(180deg, #2A170B 0%, #4A2A18 60%, #1E0F08 100%);
  --grad-roast-medium:  linear-gradient(180deg, #6B4525 0%, #B07A4C 60%, #6B4525 100%);
  --grad-chrome:        linear-gradient(180deg, #F3F5F7 0%, #B7BFC9 38%, #8A95A2 52%, #DDE2E8 80%, #5E6772 100%);

  /* Animation */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-4: 600ms;
}

/* ============================================================================
   Semantic element styles — opt into via class on a wrapper
   ============================================================================ */

.cops-type-host {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* WORDMARK — the "COPS" all-caps display. Use only for the largest titles.
   We render a chrome gradient text effect to mimic the show's wordmark
   metallic feel when the PNG logo can't be used. */
.cops-wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-display-2xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display-tight);
  text-transform: uppercase;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.65));
}

/* Headings */
.cops-h1 {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display-tight);
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.cops-h2 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.cops-h3 {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--fg);
  text-transform: uppercase;
  margin: 0;
}
.cops-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

/* Eyebrow — small, wide, badge-like label that sits above headlines */
.cops-eyebrow {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--t-caption);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cops-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

/* Body */
.cops-p {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.cops-p-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
  margin: 0;
}
.cops-p-sm {
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  margin: 0;
}

.cops-caption {
  font-family: var(--font-headline);
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--fg-3);
}

/* Stencil — used for badges, case-file headers */
.cops-stencil {
  font-family: var(--font-stencil);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Mono — receipts, SKUs, case numbers */
.cops-mono {
  font-family: var(--font-mono);
  font-size: var(--t-body-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Inline pill — status, "IN STOCK", "OFFICIAL" */
.cops-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  background: var(--cops-graphite);
  color: var(--fg-1);
  border: 1px solid var(--border-strong);
}
.cops-pill--red    { background: var(--cops-red-deep); color: #fff; border-color: var(--cops-red); }
.cops-pill--blue   { background: var(--cops-blue-deep); color: #fff; border-color: var(--cops-blue); }
.cops-pill--gold   { background: rgba(200,162,74,0.15); color: var(--cops-gold-bright); border-color: var(--cops-gold); }