/* ==========================================================================
   Rayco Sign Shop — design tokens
   Palette sampled directly from the shop's own brand artifacts:
     #0F0C07  storefront fascia (warm near-black)      -> ground
     #0089AD  business card ink (cyan)                 -> primary accent
     #3B160E  building facade (brick, night-darkened)  -> secondary accent
   ========================================================================== */

@font-face {
  font-family: 'Oswald';
  src: url('../fonts/oswald-latin.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- ground / surfaces (warm blacks, from the fascia) ---- */
  --ink: #0B0A08;
  --ink-1: #100E0C;
  --ink-2: #161412;
  --ink-3: #1E1B18;
  --ink-4: #2A2622;

  /* ---- type ---- */
  --cream: #F4EFE5;
  --cream-2: #D9D3C6;
  --cream-dim: #A9A296;
  --cream-faint: #8A8478; /* 5.33:1 on --ink (was #7D7669 at 4.40, under AA) */

  /* ---- accents ---- */
  --cyan: #19C8F0;
  --cyan-2: #5CDBFA;
  --cyan-deep: #0089AD;
  --cyan-ink: #00566E;

  --brick: #D14426;
  --brick-2: #F0603C;
  --brick-deep: #8C2A14;

  --amber: #F5A524;

  /* ---- semantic ---- */
  --bg: var(--ink);
  --surface: var(--ink-2);
  --surface-2: var(--ink-3);
  --text: var(--cream);
  --text-muted: var(--cream-dim);
  --accent: var(--cyan);
  --accent-2: var(--brick);
  --line: rgba(244, 239, 229, 0.10);
  --line-strong: rgba(244, 239, 229, 0.18);

  /* ---- light section inversion (day/night rhythm) ---- */
  --light-bg: #F4EFE5;
  --light-surface: #FFFFFF;
  --light-text: #14110E;
  --light-muted: #55504A;
  --light-line: rgba(20, 17, 14, 0.14);
  --light-faint: #625C54; /* 5.77:1 on --light-bg */

  /* ---- glass ---- */
  --glass-bg: rgba(22, 20, 18, 0.62);
  --glass-bg-strong: rgba(16, 14, 12, 0.86);
  --glass-border: rgba(244, 239, 229, 0.14);
  --glass-blur: blur(20px) saturate(160%);

  /* ---- multi-layer shadows (contact + ambient + cast + glow) ---- */
  --shadow-1:
    0 1px 1px rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-2:
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.38),
    0 10px 24px rgba(0, 0, 0, 0.30);
  --shadow-3:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.42),
    0 22px 48px rgba(0, 0, 0, 0.38),
    0 40px 80px rgba(0, 0, 0, 0.24);
  --shadow-4:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 14px 34px rgba(0, 0, 0, 0.45),
    0 34px 70px rgba(0, 0, 0, 0.40),
    0 60px 120px rgba(0, 0, 0, 0.30);
  --glow-cyan:
    0 0 0 1px rgba(25, 200, 240, 0.35),
    0 6px 22px rgba(25, 200, 240, 0.30),
    0 14px 50px rgba(25, 200, 240, 0.18);
  --glow-brick:
    0 0 0 1px rgba(209, 68, 38, 0.35),
    0 6px 22px rgba(209, 68, 38, 0.28);

  /* ---- type scale (fluid) ---- */
  --font-display: 'Oswald', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-hero: clamp(2.4rem, 6.3vw, 5.5rem);
  --fs-h1: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 2.3vw, 1.85rem);
  --fs-h4: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.18vw, 1.115rem);
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-label: 0.72rem;

  --lh-display: 0.94;
  --lh-heading: 1.08;
  --lh-body: 1.68;
  --measure: 68ch;

  /* ---- spacing / rhythm ---- */
  --section-y: clamp(5rem, 11vw, 10rem);
  --gutter: clamp(1.15rem, 4vw, 3.5rem);
  --wrap: 1280px;
  --wrap-narrow: 940px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 180ms;
  --t-mid: 300ms;
  --t-slow: 560ms;

  /* ---- z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-drawer: 40;
  --z-mobilebar: 45;
  --z-modal: 50;
  --z-preloader: 60;

  --header-h: 76px;
  --topbar-h: 40px;
}

/* The page commits to its dark showroom identity, so the viewport chrome and
   form controls are told about it explicitly rather than inheriting. */
:root { color-scheme: dark; }