/* =========================================================================
   Cigarista — Colors & Type
   Single source of truth for tokens. Pulled from the production Compose
   theme (composeApp/.../theme/Color.kt) and the redesign source.

   Import:    <link rel="stylesheet" href="colors_and_type.css">
   Then use:  color: var(--gold-yellow);  font: var(--type-title-m);
   ========================================================================= */

/* ─── Fonts ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Bebas Neue";
  src: url("/assets/BebasNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Bebas Neue is the wordmark face only — wide letterspacing, all-caps, gold.
     Don't use it for body copy. */
  --font-display: "Bebas Neue", "Oswald", "Impact", system-ui, sans-serif;

  /* Body/UI: matches the Compose Typography() defaults — SF Pro on Apple,
     Roboto on Android. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Helvetica Neue", "Roboto", system-ui, sans-serif;

  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

/* ─── Color tokens ──────────────────────────────────────────────────── */

:root {
  /* ── Brand golds — the signature warm range */
  --gold-yellow:      #F2BF66;  /* Primary accent — section titles, brand text, active states */
  --gold-warm:        #FFD27F;  /* Warmer, softer gold — paywall headings, splash */
  --gold-dark:        #D99B1A;  /* Deeper gold — pressed states, FAB */
  --gold-subscribe:   #B08D57;  /* Muted "antique" gold — CTAs over dark */
  --gold-accent:      #B08D57;  /* alias of gold-subscribe */
  --gold-gradient-1:  #FFCD5A;  /* Headline gradient start */
  --gold-gradient-2:  #FFD27F;  /* Headline gradient end */

  /* ── Browns — the wood / tobacco range */
  --brown-screen:     #0C0600;  /* Screen background (paywall, auth) */
  --brown-deepest:    #0F0600;  /* Unlock-card background */
  --brown-dark:       #2D1A06;  /* Top of vertical brown→black gradient, tab bar */
  --brown-card:       #1D1309;  /* Primary card background */
  --brown-medium:     #6D4C1A;  /* Top app bar, accent strokes */
  --brown-cta-1:      #8C5E29;  /* Subscribe button radial outer */
  --brown-cta-2:      #A97C50;  /* Subscribe button radial inner */
  --brown-review:     #402812;  /* Review buttons base */
  --brown-review-mid: #594121;  /* Review buttons mid */
  --brown-review-dk:  #66401A;  /* Review buttons dark */

  /* ── Surfaces — Material 3 dark */
  --surface-bg-dark:  #0D0D0D;  /* ThemeBackgroundDark */
  --surface-dark:     #1F1F1F;  /* ThemeSurfaceDark */
  --surface-gray:     #1C1C1E;  /* DarkGraySurface — list rows, section cards */
  --surface-black:    #000000;
  --surface-white:    #FFFFFF;
  --surface-light-bg: #FFFBF7;  /* Light mode background (rarely used) */

  /* ── Text */
  --text-primary:     #F0F0F0;  /* TextPrimaryOnDark */
  --text-secondary:   #A0A0A0;  /* TextSecondaryOnDark */
  --text-on-gold:     #1A1A1A;  /* Black text on gold fills */
  --text-on-brown:    #FFF9EF;  /* ButtonSubscribeText */
  --text-offwhite:    #EAE1D9;  /* Auth, paywall body */
  --text-cream:       #F2F1EF;  /* Paywall variant */
  --text-tan:         #B8A898;  /* SecondaryTextTan — supporting copy on dark */
  --text-tan-2:       #C9BDAF;  /* Paywall secondary */
  --text-no-thanks:   #B39B7F;  /* Tertiary action ("No thanks") */
  --text-light-gray:  #CCCCCC;  /* Chevrons, dividers */

  /* ── Borders & dividers */
  --border-editable:  #4A4A4A;
  --border-divider:   rgba(128, 128, 128, 0.20);
  --border-hairline:  rgba(255, 255, 255, 0.04);  /* used for card edges */
  --slider-inactive:  #3A3A3A;
  --switch-track-off: #3A3A3C;
  --switch-thumb-off: #767678;

  /* ── Status */
  --status-error:       #D32F2F;
  --status-error-soft:  #E57373;
  --status-warning:     #FFC107;
  --status-low:         #E0A856;  /* "Running low" amber */

  /* ── Origin-flag dots (used in OriginChip) */
  --flag-cuba:       #CE1126;
  --flag-nic:        #0067C6;
  --flag-dom:        #002D62;
  --flag-hnd:        #0073CF;
  --flag-mex:        #006847;
  --flag-ecu:        #FFCE00;

  /* ── Radii — observed RoundedCornerShape values in code */
  --radius-xs:   4px;    /* strength chip */
  --radius-sm:   8px;    /* sign-in buttons, age toggles */
  --radius-md:  10px;    /* paywall pack buttons, humidor list container, list rows */
  --radius-lg:  12px;    /* subscribe CTA, info cards, grail-row outer */
  --radius-xl:  14px;    /* stats card */
  --radius-2xl: 16px;    /* empty-state, identification card */
  --radius-3xl: 20px;    /* loading overlay, step indicator */
  --radius-sheet: 24px;  /* bottom sheets (top corners only) */
  --radius-full: 9999px;

  /* ── Spacing — Compose dp ≈ 1px at mdpi */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;    /* canonical horizontal page padding */
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Shadows — only used on overlays / sheets / loading cards */
  --shadow-sm:    0 2px 4px rgba(0, 0, 0, 0.30);
  --shadow-md:    0 5px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 10px 28px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 -24px 60px rgba(0, 0, 0, 0.75); /* sheets cast UP */
  --glow-gold:    0 0 24px rgba(242, 191, 102, 0.25);

  /* ── Signature gradients */
  --gradient-screen:   linear-gradient(180deg, #2D1A06 0%, #000000 100%);
  --gradient-screen-soft: linear-gradient(180deg, #1A0E03 0%, #000 60%);
  --gradient-cta:      radial-gradient(circle, #A97C50 0%, #8C5E29 100%);
  --gradient-headline: linear-gradient(90deg, #FFCD5A 0%, #FFD27F 100%);

  /* Tonight's-pick gloss used on featured cards */
  --gradient-featured: linear-gradient(160deg, #2a1808 0%, #15090a 60%, #0a0402 100%);

  /* Subtle "stats card" gold wash */
  --wash-gold-soft: linear-gradient(180deg, rgba(242,191,102,.07) 0%, rgba(242,191,102,.02) 100%);
  --border-gold-soft: 1px solid rgba(242,191,102,.18);

  /* ── Motion */
  --ease-smooth: cubic-bezier(.22, .61, .36, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    280ms;
  --dur-grail:   3.6s;   /* sparkler-edge rotation */
}

/* ─── Semantic type ramp ────────────────────────────────────────────── */

:root {
  /* Display — Bebas Neue, the wordmark face */
  --type-wordmark-size: 64px;
  --type-wordmark-tracking: 0.12em;
  --type-wordmark-app-bar: 0.14em;   /* in-app navbar wordmark */

  /* Mirrors the Material 3 Typography defaults the app inherits */
  --type-display-l: 600 36px/44px var(--font-sans);  /* paywall headline */
  --type-headline-s:700 24px/32px var(--font-sans);  /* "Sign In Required" */
  --type-title-l:   700 22px/28px var(--font-sans);  /* top bar, sheet titles */
  --type-title-m:   700 18px/24px var(--font-sans);  /* section headers */
  --type-title-s:   600 16px/22px var(--font-sans);  /* row titles */
  --type-body-l:    400 17px/24px var(--font-sans);  /* benefit list */
  --type-body-m:    400 15px/22px var(--font-sans);  /* default paragraph */
  --type-body-s:    400 13px/18px var(--font-sans);  /* fine print, captions */
  --type-label-l:   600 14px/20px var(--font-sans);
  --type-label-m:   500 12px/16px var(--font-sans);
  --type-label-s:   500 11px/14px var(--font-sans);  /* tab bar labels */

  /* Eyebrow — all-caps wide-tracked tan label that prefixes sections like
     "THE HUMIDOR", "INVENTORY", "FROM THE CATALOG" */
  --type-eyebrow: 700 11px/14px var(--font-sans);
  --type-eyebrow-tracking: 0.14em;
}

/* ─── Base rules ───────────────────────────────────────────────────── */

html, body {
  background: var(--surface-black);
  color: var(--text-primary);
  font: var(--type-body-m);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--type-display-l); color: var(--gold-warm); letter-spacing: -0.01em; }
h2, .h2 { font: var(--type-headline-s); color: var(--text-offwhite); }
h3, .h3 { font: var(--type-title-m); color: var(--gold-yellow); }
h4, .h4 { font: var(--type-title-s); color: var(--gold-yellow); }
p       { font: var(--type-body-m); color: var(--text-primary); }
small   { font: var(--type-body-s); color: var(--text-tan); }

.wordmark {
  font-family: var(--font-display);
  font-size: var(--type-wordmark-size);
  letter-spacing: var(--type-wordmark-tracking);
  color: var(--gold-yellow);
  text-transform: uppercase;
  line-height: 1;
}

.wordmark-bar {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: var(--type-wordmark-app-bar);
  color: var(--gold-yellow);
  text-transform: uppercase;
  line-height: 1;
}

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-tan);
}

.headline-gold {
  background: var(--gradient-headline);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/CormorantGaramond-600-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/CormorantGaramond-700-italic.woff2") format("woff2");
}