/* ==========================================================
   RANDOMLY VISIONARY
   VARIABLES / DESIGN TOKENS
   ========================================================== */

/*
   Dark mode is the default.
   All theme variables live here.
*/

:root {
  color-scheme: dark;

  /* ======================================================
     DARK PALETTE
     ====================================================== */

  --onyx: #131316;
  --shadow-grey: #1c1c21;
  --shadow-grey-2: #26262c;
  --graphite: #2f3037;
  --gunmetal: #393a41;
  --charcoal: #4b4c52;
  --charcoal-2: #5b5c62;
  --dim-grey: #6a6b70;
  --color-shop-accent: #F2E600;
  --color-ui-rust: #B84A00;

  /* ======================================================
     LIGHT PALETTE
     ====================================================== */

  --bright-snow: #f8f9fa;
  --platinum: #e9ecef;
  --alabaster-grey: #dee2e6;
  --pale-slate: #ced4da;
  --pale-slate-2: #adb5bd;
  --slate-grey: #6c757d;
  --iron-grey: #495057;
  --gunmetal-light: #343a40;
  --carbon-black: #212529;
  --color-shop-accent: #B84A00;
  

  /* ======================================================
     TYPOGRAPHY
     ====================================================== */

  --font-heading: "Staatliches", Impact, "Arial Black", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Nunito Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-decorative: "Blaka Ink", cursive;

  --fs-root: 16px;

  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --fs-h1: 2.75rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.875rem;
  --fs-h4: 1.5rem;
  --fs-h5: 1.25rem;
  --fs-h6: 1.1rem;

  --lh-body: 1.6;
  --lh-heading: 1.2;

  /* ======================================================
     LAYOUT
     ====================================================== */

  --container-max-width: 1200px;
  --content-max-width: 780px;

  /* ======================================================
     SPACING
     ====================================================== */

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ======================================================
     BORDERS / RADII
     ====================================================== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ======================================================
     SHADOWS
     ====================================================== */

  --shadow-soft: 0 10px 30px rgba(0,0,0,.45);

  /* ======================================================
     TRANSITIONS
     ====================================================== */

  --transition-fast: .2s ease;
  --transition-slow: .45s ease;

  /* ======================================================
     SEMANTIC COLORS (Dark Theme)
     ====================================================== */

 --color-background: var(--onyx);
--color-body-bg: var(--onyx);

--color-surface: var(--shadow-grey);
  --color-surface-alt: var(--shadow-grey-2);

  --color-text: #ffffff;
  --color-text-muted: #c7c7c7;

  --color-border: var(--charcoal);
  --color-accent: var(--charcoal-2);
--color-accent-strong: var(--dim-grey);

  --color-link: #ffffff;
  --color-link-hover: #d9d9d9;

  --color-hero-bg-base: var(--shadow-grey);
}

/* ==========================================================
   LIGHT THEME OVERRIDES
   ========================================================== */

[data-theme="light"] {

  color-scheme: light;

  --color-background: var(--bright-snow);
--color-body-bg: var(--bright-snow);

--color-surface: var(--platinum);

  --color-surface-alt: var(--alabaster-grey);

  --color-text: var(--carbon-black);
  --color-text-muted: var(--iron-grey);

  --color-border: var(--pale-slate);
  
  --color-accent: var(--iron-grey);
--color-accent-strong: var(--platinum);

  --color-link: var(--carbon-black);
  --color-link-hover: var(--iron-grey);

  --color-hero-bg-base: var(--bright-snow);
}