/* ========================================================
   Oakley's brand design tokens
   Walnut chrome / cream canvas / meadow / jute
   Libre Baskerville / Manrope / JetBrains Mono
   ======================================================== */

:root {
    /* Brand palette */
    --bb-walnut:        #1F1812;
    --bb-walnut-soft:   #2E251D;
    --bb-canvas:        #FBF8F1;
    --bb-card:          #FFFFFF;
    --bb-card-alt:      #F4EFE3;
    --bb-meadow:        #1F4D34;
    --bb-meadow-deep:   #163A27;
    --bb-meadow-tint:   #E3EBE2;
    --bb-jute:          #B8956A;
    --bb-jute-deep:     #8C6E4C;
    --bb-jute-tint:     #F1E8D8;
    --bb-critical:      #8E3A24;
    --bb-critical-deep: #6E2C1B;
    --bb-critical-tint: #F4E3DC;
    --bb-text-primary:  #1F1812;
    --bb-text-secondary:#5C5042;
    --bb-text-tertiary: #7A7363;
    --bb-text-muted:    #9E978A;
    --bb-line:          #E5DECC;
    --bb-line-strong:   #C9C0AC;
    --bb-text-on-chrome: #F4ECE0;
    --bb-text-on-chrome-muted: #BCB3A4;

    /* Type */
    --bb-display: 'Libre Baskerville', Georgia, serif;
    --bb-sans:    'Manrope', system-ui, -apple-system, sans-serif;
    --bb-mono:    'JetBrains Mono', Menlo, monospace;

    /* Spacing / sizing */
    --bb-radius-sm: 4px;
    --bb-radius:    8px;
    --bb-radius-lg: 12px;
    --bb-touch-min: 56px;  /* touch-friendly minimum height */
    --bb-touch-cta: 72px;  /* large action buttons */

    /* Z layers */
    --bb-z-modal:    1000;
    --bb-z-toast:    2000;
    --bb-z-error:    3000;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

body {
    font-family: var(--bb-sans);
    font-size: 15px;
    line-height: 1.5;
    color: var(--bb-text-primary);
    background: var(--bb-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;  /* don't bounce in kiosk mode */
    user-select: none;          /* no accidental text selection */
}

/* Allow selection on key inputs */
input, textarea, [contenteditable] {
    user-select: text;
}

h1, h2, h3, h4 {
    font-family: var(--bb-display);
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0;
}

/* Utility classes */
.eyebrow {
    font-family: var(--bb-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bb-text-tertiary);
    font-weight: 600;
}

.tabular {
    font-family: var(--bb-mono);
    font-variant-numeric: tabular-nums;
}