/* ============================================================
   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;
}


/* ============================================================
   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;
    --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 --- */
    --z-base:    0;
    --z-raised:  10;
    --z-nav:     100;
    --z-modal:   200;
    --z-toast:   300;
}


/* ============================================================
   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: uppercase;
    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(--gold);
    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;
}

/* 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(--gold);
    outline-offset: 3px;
}


/* ============================================================
   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;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    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;
    }
}