/* core.css - global tokens, resets, base elements, utilities for Style OS */

:root{
  --BLACK: #0f0f0f;
  --WHITE: #f5f5f5;
  --SILVER: #dedede;
  --ACCENT: #7d00ea;
  --BEBAS: 'Bebas Neue', sans-serif;
  --MONTSERRAT: 'Montserrat', sans-serif;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  --radius-sm: 6px;
  --radius-md: 8px;

  --max-width: 1200px;
}

/* Prefer local WOFF2 files when available (place fonts in /public/assets/fonts).
   Expected files: BebasNeue-regular.woff2, Montserrat-400.woff2, Montserrat-500.woff2
   These rules provide fast, privacy-friendly self-hosted fonts and fall back to Google Fonts via @import if needed. */
@font-face{font-family:'Montserrat';font-weight:400;font-style:normal;font-display:swap;src:local('Montserrat'), url('/assets/fonts/Montserrat-400.woff2') format('woff2'), url('/assets/fonts/Montserrat-400.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-weight:500;font-style:normal;font-display:swap;src:local('Montserrat Medium'), url('/assets/fonts/Montserrat-500.woff2') format('woff2'), url('/assets/fonts/Montserrat-500.ttf') format('truetype')}
@font-face{font-family:'Bebas Neue';font-weight:400;font-style:normal;font-display:swap;src:local('Bebas Neue'), url('/assets/fonts/BebasNeue-regular.woff2') format('woff2'), url('/assets/fonts/BebasNeue-400.ttf') format('truetype')}

/* Load fonts from Google Fonts as a fallback (CDN). */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;500&display=swap');

/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
/* Ensure font stacks include fallbacks. Primary fonts are loaded from Google Fonts (Montserrat + Bebas Neue).
   If Google Fonts fails, the stack will fall back to system fonts. */
html{font-family: var(--MONTSERRAT), system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial; font-size:16px; -webkit-font-smoothing:antialiased}
body{margin:0;background:var(--WHITE);color:var(--BLACK);line-height:1.45}

/* Admin-visible low-key warning when fonts fail to load (non-blocking) */
.font-warning{position:fixed;top:0;left:0;right:0;background:#fff3cd;color:#222;padding:0.5rem 1rem;border-bottom:1px solid #f0e6a8;font-size:0.95rem;z-index:9999;text-align:center}
/* Headings */
h1,h2,h3,h4{font-family:var(--BEBAS);margin:0 0 var(--spacing-sm) 0;color:var(--BLACK)}
h1{font-size:1.8rem}
h2{font-size:1.4rem}

/* Links */
a{color:var(--ACCENT);text-decoration:none}
a:hover{text-decoration:underline}

/* Buttons */
.btn{display:inline-block;padding:.6rem 1rem;border-radius:var(--radius-md);background:var(--ACCENT);color:var(--WHITE);text-decoration:none;border:0;cursor:pointer}
.btn:focus{outline:3px solid color-mix(in srgb, var(--ACCENT) 20%, white);outline-offset:3px}

/* Accessibility helpers */
:focus{outline:3px solid var(--ACCENT);outline-offset:3px}
[role="button"]{cursor:pointer}

/* Utilities */
.u-hidden{display:none !important}
.u-flex{display:flex}
.u-center{display:flex;align-items:center;justify-content:center}

/* Layout */
.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--spacing-md)}
.card{background:white;padding:1rem;border:1px solid var(--SILVER);border-radius:8px;margin-top:1rem}

/* Reduced motion & accessibility */
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
button,a{min-height:44px;min-width:44px}

/* Small responsive helpers */
@media (max-width:600px){h1{font-size:1.4rem}}