/* ============================================================
   FLEASTS � BASE DESIGN SYSTEM
   File: css/core/base.css

   Load order: after Bootstrap, before components.
   Defines tokens, reset, and element-level defaults only.
   No component classes here � those live in components/.
============================================================ */


/* ============================================================
   0. RESET ESSENTIALS
   (previously inherited from Bootstrap's reboot — Bootstrap CSS
   is no longer loaded; these two rules are what pages relied on)
============================================================ */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* The hidden attribute must always win, even over display:flex rules
   (Bootstrap's reboot provided this; several components rely on it) */
[hidden] {
    display: none !important;
}


/* ============================================================
   0a. PAGE TRANSITIONS
   Subtle cross-fade between same-origin page loads via the
   cross-document View Transitions API. Pure progressive
   enhancement — browsers without support just navigate as
   normal, no fallback to maintain. Honours reduced-motion.
============================================================ */

@view-transition {
    navigation: auto;
}

/* Keep the browser's default cross-fade, just make it quick + subtle. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.2s;
    animation-timing-function: ease;
}

/* Shared element: a product card image morphs into the PDP hero (and
   back). The name is assigned to exactly one element per page at
   navigation time by the script in base.html. Slightly longer than the
   root fade so the morph reads clearly. */
::view-transition-group(product-hero) {
    animation-duration: 0.3s;
    animation-timing-function: ease;
}

/* Reduced-motion: snap instantly, no fade. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}


/* ============================================================
   0. FONT FACE
============================================================ */

@font-face {
    font-family: 'Special Elite';
    /* woff2 is ~60% smaller; ttf kept as a legacy fallback */
    src: url("/static/fonts/google/SpecialElite-Regular.8608f917458e.woff2") format('woff2'),
         url("/static/fonts/google/SpecialElite-Regular.0361d96faa98.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    /* Prevent FOUT (flash of unstyled text) */
    font-display: swap;
}


/* ============================================================
   1. DESIGN TOKENS
   All brand values live here. Components reference these vars.
   Changing a token cascades everywhere � never hardcode values
   in component or page files.
============================================================ */

:root {
    /* --- Palette --- */
    --black:          #0d0d0d;
    --black-soft:     #161616;
    --black-mid:      #1e1e1e;
    --cream:          #f3f0e7;
    --cream-soft:     #faf7ef;
    --cream-mid:      #e8e4da;
    --gold:           #e8c84a;
    --gold-dark:      #c9a92e;
    /* Keyboard focus ring. Ink by default — visible on the light storefront
       (gold-on-cream computes ~1.5:1, effectively invisible). The dark chrome
       (nav/footer/tab bar) re-asserts gold below. */
    --focus-ring:     #18120f;
    --gray-100:       #f0eeea;
    --gray-200:       #d8d5ce;
    --gray-300:       #cfcfcf;
    --gray-400:       #b1b1b1;
    --gray-500:       #888880;
    --border-light:   rgba(255, 255, 255, 0.08);
    --border-dark:    rgba(0, 0, 0, 0.12);

    /* --- Semantic --- */
    --color-bg:       var(--black);
    --color-surface:  var(--black-soft);
    --color-text:     var(--cream);
    --color-muted:    var(--gray-400);
    --color-accent:   var(--gold);
    --color-border:   var(--border-light);

    /* --- Spacing scale (4px base) --- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  28px;
    --space-7:  40px;
    --space-8:  56px;

    /* --- Typography --- */
    --font-heading: 'Special Elite', 'Courier New', monospace;
    --font-body:    'Special Elite', 'Courier New', monospace;
    --font-mono:    'Courier New', monospace;

    /* --- Border radius --- */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* --- Transitions --- */
    --ease-fast:   0.15s ease;
    --ease-normal: 0.25s ease;
    --ease-slow:   0.4s ease;

    /* --- Z-index ladder (matches the live shell stacking) --- */
    --z-base:    0;
    --z-raised:  10;
    --z-tabbar:  995;
    --z-nav:     1000;
    --z-modal:   2000;
    --z-toast:   3000;
    --z-overlay: 3500;
}


/* ============================================================
   2. RESET � minimal, intentional
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;

    /* Remove iOS blue tap flash */
    -webkit-tap-highlight-color: transparent;
}

html {
    /* Prevent font size inflation on mobile orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* Prevent horizontal overflow from escaped content */
    overflow-x: hidden;
}

/* Root type scale: 17px base lifts all rem-based text/spacing ~6% above
   the 16px default so the site reads less cramped. Tune here if needed. */
html {
    font-size: 17px;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.55;
}

/* Remove default list styles when used for UI (not content) */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ============================================================
   3. TYPOGRAPHY DEFAULTS
============================================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    margin: 0 0 var(--space-3) 0;
    line-height: 1.15;
}

h1 { font-size: clamp(28px, 7vw, 56px); }
h2 { font-size: clamp(22px, 5vw, 40px); }
h3 { font-size: clamp(18px, 4vw, 28px); }
h4 { font-size: clamp(15px, 3vw, 20px); }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p {
    margin: 0 0 var(--space-4) 0;
}

small {
    font-size: 12px;
    letter-spacing: 0.04em;
}


/* ============================================================
   4. LINKS
============================================================ */

a {
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: opacity var(--ease-fast), text-shadow var(--ease-fast);
}

a:hover {
    opacity: 1;
    text-shadow: 0 0 8px rgba(243, 240, 231, 0.45);
}

a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Skip-to-content link — visible only on keyboard focus */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10000;
    padding: 10px 16px;
    background: var(--gold);
    color: var(--black);
    font-family: var(--font-heading);
    letter-spacing: 0.06em;
    text-transform: lowercase;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
    left: 0;
}

/* Don't force a focus outline on the main landmark when skipped to */
main:focus { outline: none; }


/* ============================================================
   5. MEDIA
============================================================ */

img,
video,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ── flea's ts brand: the whole storefront is lowercase — no capitals, anywhere.
   Done with text-transform (the source text keeps real casing, so search engines
   and screen readers still get proper words). Form controls opt out so shoppers
   can still type capitals into fields (email, address, promo code, search). ── */
body {
    text-transform: lowercase;
}
input,
textarea,
select {
    text-transform: none;
}

/* Preserve aspect ratio on responsive images */
img {
    object-fit: cover;
}

/* Inline SVG icons (replaces Font Awesome <i> glyphs).
   Sizes to the current font-size, inherits text color. */
.fa-svg {
    display: inline-block;
    height: 1em;
    width: auto;
    fill: currentColor;
    vertical-align: -0.125em;
    flex-shrink: 0;
}


/* ============================================================
   6. BUTTONS (element defaults only)
   Visual styling lives in css/components/buttons.css
============================================================ */

button,
.btn {
    font-family: var(--font-heading);
    letter-spacing: 0.06em;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: none;
    background: none;
    /* Minimum tap target size */
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

button:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* The dark chrome keeps the gold ring (ink would vanish on #0a0a0a/#111/#161616).
   Custom-property inheritance means descendants pick this up automatically. */
.fleasts-nav,
.fleasts-footer,
.tabbar {
    --focus-ring: var(--gold);
}


/* ============================================================
   7. FORM ELEMENTS (element defaults only)
   Visual styling lives in css/components/forms.css
============================================================ */

/* Text-like inputs only — checkboxes/radios must keep their own box
   (this rule's width:100% + min-height:44px otherwise distorts them). */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    font-family: var(--font-body);
    font-size: 16px; /* Prevents iOS auto-zoom on focus */
    background: #eef4fc; /* soft light blue — pleasant empty state */
    color: #18120f;
    border: 1px solid #c9d6ea;
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    /* Minimum touch target height */
    min-height: 44px;
    width: 100%;
    transition: border-color var(--ease-fast);
    -webkit-appearance: none;
    appearance: none;
}

/* Keyboard focus for form controls. The old blanket `outline: none` hid focus
   entirely — including radios/checkboxes, which have no border to shift. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    border-color: var(--gold);
}

textarea {
    min-height: 100px;
    resize: vertical;
}


/* ============================================================
   8. UTILITY OVERRIDES
   Light context (e.g. landing hero, product cards on cream)
============================================================ */

.light-bg {
    background: var(--cream);
    color: var(--black);
}

/* Forces all children to dark text � use sparingly */
.light-bg * {
    color: inherit;
}


/* ============================================================
   9. REDUCED MOTION
   Honour the user's OS-level "reduce motion" preference.
============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}