/* =========================================================
   variables.css — design tokens
   ========================================================= */

/*
 * Metropolis (optional premium upgrade)
 * To use it: download the .woff2 files from
 *   https://github.com/chrismsimpson/Metropolis/releases
 * drop them into /assets/fonts/, then uncomment the @font-face
 * blocks below and remove 'Inter' from --font-display.
 *
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Regular.woff2')   format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Medium.woff2')    format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-SemiBold.woff2')  format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Bold.woff2')      format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-ExtraBold.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }
 * @font-face { font-family:'Metropolis'; src:url('../assets/fonts/Metropolis-Black.woff2')     format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
 */

@font-face {
  font-family: 'Priestacy';
  src: url('../assets/fonts/Priestacy.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- COLORS ----- */
  color-scheme: light;

  --bg-primary:   #ffffff;
  --bg-secondary: #eee8dc;
  --bg-deeper:    #fffaf1;
  --bg-card:      #ffffff;
  --bg-card-hover:#f4eddf;
  --bg-device:    #ede4d4;
  --bg-device-screen: #fffaf1;
  --border:       #ded4c2;
  --border-light: #d0c3ae;

  --accent:       #b98207;
  --accent-soft:  #d99f17;
  --accent-glow:  rgba(185, 130, 7, 0.22);

  --color-error:   #f87171;
  --color-success: #15803d;

  --text-primary:   #17130d;
  --text-secondary: #51483b;
  --text-muted:     #746856;
  --text-dim:       #8b7d69;

  --on-accent: #111111;
  --header-bg-scrolled: rgba(255, 250, 241, 0.84);
  --header-border-scrolled: rgba(33, 27, 18, 0.09);
  --header-shadow-scrolled: 0 1rem 34rem rgba(89, 68, 35, 0.13);
  --drawer-bg: #fffaf1;
  --drawer-link-border: rgba(33, 27, 18, 0.1);
  --footer-bg: #21180e;
  --hero-img-opacity: 0.42;
  --hero-img-filter: saturate(0.82) contrast(0.92);
  --hero-veil:
    radial-gradient(120% 80% at 50% 0%, rgba(255,250,241,0.18) 0%, rgba(255,250,241,0.7) 54%, var(--bg-primary) 100%),
    linear-gradient(90deg, rgba(247,244,238,0.88) 0%, rgba(247,244,238,0.28) 50%, rgba(247,244,238,0.82) 100%);
  --image-title: #ffffff;
  --image-muted: rgba(255, 255, 255, 0.76);
  --image-overlay: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.74) 100%);
  --modal-backdrop: rgba(23, 19, 13, 0.62);
  --modal-control-bg: rgba(255,255,255,0.86);
  --modal-control-bg-hover: #ffffff;
  --modal-control-border: rgba(23,19,13,0.14);
  --modal-control-color: #17130d;

  /* ----- TYPOGRAPHY ----- */
  --font-display: 'Metropolis', 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* ^ Metropolis loads from /assets/fonts/ if present; falls through to Inter otherwise */
  --font-body:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-priestacy: 'Priestacy', var(--font-display);

  /* ----- EASING ----- */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  /* ----- LAYOUT ----- */
  --container: 1320rem;
  --gutter:    clamp(20rem, 4vw, 60rem);

  /* ----- RADII ----- */
  --r-sm:   8rem;
  --r-md:  14rem;
  --r-lg:  22rem;
  --r-pill: 999rem;

  /* ----- Z-INDEXES ----- */
  --z-cursor:    9999;
  --z-preloader: 9998;
  --z-overlay:    900;
  --z-header:     800;
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-primary:   #0a0a0a;
  --bg-secondary: #111111;
  --bg-deeper:    #050505;
  --bg-card:      #161616;
  --bg-card-hover:#1c1c1c;
  --bg-device:    #131313;
  --bg-device-screen: #0c0c0c;
  --border:       #222222;
  --border-light: #2a2a2a;

  --accent:       #f5b921;
  --accent-soft:  #ffd34f;
  --accent-glow:  rgba(245, 185, 33, 0.35);

  --color-error:   #f87171;
  --color-success: #4ade80;

  --text-primary:   #ffffff;
  --text-secondary: #b8b8b8;
  --text-muted:     #8a8a8a;
  --text-dim:       #797979;

  --on-accent: #0a0a0a;
  --header-bg-scrolled: rgba(10, 10, 10, 0.85);
  --header-border-scrolled: rgba(255, 255, 255, 0.06);
  --header-shadow-scrolled: 0 1rem 40rem rgba(0, 0, 0, 0.6);
  --drawer-bg: #060606;
  --drawer-link-border: rgba(255, 255, 255, 0.06);
  --footer-bg: #060606;
  --hero-img-opacity: 0.25;
  --hero-img-filter: grayscale(1) blur(2rem);
  --hero-veil:
    radial-gradient(120% 80% at 50% 0%, transparent 0%, rgba(10,10,10,0.4) 50%, #0a0a0a 100%),
    linear-gradient(90deg, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.2) 50%, rgba(10,10,10,0.85) 100%);
  --image-title: #ffffff;
  --image-muted: rgba(255, 255, 255, 0.72);
  --image-overlay: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.85) 100%);
  --modal-backdrop: rgba(0,0,0,0.88);
  --modal-control-bg: rgba(255,255,255,0.08);
  --modal-control-bg-hover: rgba(255,255,255,0.18);
  --modal-control-border: rgba(255,255,255,0.18);
  --modal-control-color: #ffffff;
}