/* ==========================================================================
   El Paso Roofing Co — Design tokens
   Token-driven families: color, font size, radius, shadow, motion and the
   global z-index scale. Rules use these variables, not literal values.
   Spacing, line-height, letter-spacing and font-weight are literal by design:
   each rule states its own value. The --space-* and --fw-* scales below are
   reference values, not a contract.

   Cascade layer order for the whole site (lowest → highest priority):
   ========================================================================== */
@layer tokens, base, layout, components, sections, utilities;

@layer tokens {
  :root {
    /* ---- Color: ink (dusk navy, sampled from the hero video sky) ---- */
    --ink-950: #070f1c;
    --ink-900: #0c1828;
    --ink-800: #12233a;
    --ink-700: #1b3352;

    /* ---- Color: paper & sand (warm stucco neutrals) ---- */
    --paper: #fbf8f3;
    --sand-100: #f4eee4;
    --sand-200: #e9dfd0;
    --sand-300: #d9cbb6;
    --white: #ffffff;

    /* ---- Color: brand red (logo) ----
       --red-500 is the logo red: use on dark surfaces and for graphics only.
       --red-600 is the action color: white text on it passes WCAG AA (5.0:1). */
    --red-500: #ed1c24;
    --red-600: #d8232a;
    --red-700: #b91c22;

    /* ---- Color: sunset accents (terracotta roof tiles + golden hour) ---- */
    --terracotta-600: #a8431f; /* AA on paper/sand (5.6:1) */
    --amber-300: #ffd27a;
    --amber-400: #f5b544; /* stars, highlights on dark */
    --amber-500: #e89b2c;

    /* ---- Color: feedback ---- */
    --success-600: #1f7a4d;
    --success-100: #e3f4ea;
    --danger-600: #c0271e;
    --danger-100: #fde8e6;

    /* ---- Semantic colors (light surfaces are the default) ---- */
    --color-bg: var(--paper);
    --color-bg-alt: var(--sand-100);
    --color-surface: var(--white);
    --color-text: var(--ink-text);
    --color-text-muted: var(--ink-muted-light); /* 6.0:1 on paper */
    --color-heading: var(--ink-900);
    --color-border: var(--sand-200);
    --color-border-strong: var(--sand-300);
    --color-accent: var(--terracotta-600);
    --color-action: var(--red-600);
    --color-action-hover: var(--red-700);
    --color-focus: var(--focus-blue);

    /* On dark surfaces (apply with the .on-dark helper or inside dark sections) */
    --dark-text: #f3f1ec;
    --dark-text-muted: #b6c0cf; /* 8.9:1 on ink-900 */
    --dark-border: rgb(255 255 255 / 0.12);
    --dark-surface: rgb(255 255 255 / 0.05);
    --dark-accent: var(--amber-400);

    /* Signature gradient: sunset over the Franklin Mountains */
    --gradient-sunset: linear-gradient(100deg, #f5b544 0%, #e8662c 52%, #d8232a 100%);
    --gradient-ember: linear-gradient(120deg, #a8431f 0%, #d8232a 60%, #b91c22 100%);

    /* ---- Named colors and overlays, grouped by use ---- */
    --ink-850: #15294a; /* lightbox background gradient stop */
    --ink-text: #17202b; /* body text on light surfaces */
    --ink-muted-light: #566170; /* muted text on light surfaces (6.0:1 on paper) */
    --focus-blue: #1a73e8; /* focus ring on light surfaces */
    --color-focus-on-dark: #8ab4ff; /* focus ring on dark surfaces */
    --danger-300: #ffb4ad; /* error text on dark surfaces */
    --color-placeholder: #6b7686; /* input placeholder */
    --white-a07: rgb(255 255 255 / 0.07); /* hairline-weight fills on dark */
    --white-a12: rgb(255 255 255 / 0.12);
    --white-a14: rgb(255 255 255 / 0.14);
    --white-a20: rgb(255 255 255 / 0.2);
    --scrim-ink-50: rgb(7 15 28 / 0.5); /* ink scrims over photos */
    --scrim-ink-62: rgb(7 15 28 / 0.62);
    --scrim-ink-70: rgb(7 15 28 / 0.7);
    --scrim-ink-88: rgb(7 15 28 / 0.88);

    /* ---- Typography ---- */
    --font-sans:
      "Archivo", "Archivo Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
      Arial, sans-serif;
    --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

    --fs-display: clamp(2.5rem, 1.55rem + 4.3vw, 5rem); /* hero h1: 40 → 80px */
    --fs-h2: clamp(1.95rem, 1.4rem + 2.4vw, 3.25rem); /* 31 → 52px */
    --fs-h3: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --fs-h4: 1.0625rem;
    --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-body: 1.0625rem; /* 17px: comfortable for older readers */
    --fs-sm: 0.9375rem;
    --fs-xs: 0.8125rem;
    --fs-eyebrow: 0.78rem;

    --lh-tight: 1.04;
    --lh-body: 1.6;

    --fw-regular: 400;
    --fw-black: 800;

    --tracking-display: -0.03em;
    --tracking-heading: -0.022em;
    --tracking-eyebrow: 0.16em;
    --stretch-display: 88%; /* Archivo width axis: slightly condensed, sturdy headlines */

    /* ---- Spacing (4px base) ---- */
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --section-pad: clamp(4.5rem, 3rem + 6.5vw, 8.5rem);
    --container-max: 77.5rem;
    --container-pad: clamp(1.25rem, 0.6rem + 3vw, 2.5rem);
    --header-h: 5.25rem;
    --header-h-condensed: 4.125rem;
    --mobile-bar-h: 4rem;

    /* ---- Grain texture: one tile size for every surface (pre-rendered tiles, see assets/img/texture) ----
       Tile names: all stylesheets live in assets/css/, so the relative url() resolves the same everywhere.
       Images are cached for one year: when a tile changes, give it a NEW file name (for example
       grain-on-light-v3.webp) and edit only these two tokens. Never replace a cached file in place. */
    --grain-light: url("../img/texture/grain-on-light-v2.webp");
    --grain-dark: url("../img/texture/grain-on-dark-v2.webp");
    /* One noise pixel = one CSS pixel on normal screens (tile is 256 px); see the dense-screen rule below. */
    --grain-size: 256px;

    /* ---- Radius ---- */
    --r-xs: 0.375rem;
    --r-sm: 0.625rem;
    --r-md: 0.875rem;
    --r-lg: 1.375rem;
    --r-xl: 1.875rem;
    --r-pill: 62.4375rem;

    /* ---- Elevation (ink-tinted, layered) ---- */
    --shadow-sm: 0 1px 2px rgb(12 24 40 / 0.06), 0 2px 6px rgb(12 24 40 / 0.05);
    --shadow-md: 0 2px 4px rgb(12 24 40 / 0.05), 0 10px 24px -6px rgb(12 24 40 / 0.12);
    --shadow-lg: 0 4px 10px rgb(12 24 40 / 0.06), 0 24px 48px -12px rgb(12 24 40 / 0.22);
    --shadow-xl: 0 10px 20px rgb(7 15 28 / 0.18), 0 40px 80px -20px rgb(7 15 28 / 0.5);
    --shadow-action: 0 8px 22px -8px rgb(216 35 42 / 0.65);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out: entrances, reveals */
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* state changes */
    --ease-spring: linear(
      0,
      0.006,
      0.025 2.8%,
      0.101 6.1%,
      0.539 18.9%,
      0.721 25.3%,
      0.849 31.5%,
      0.937 38.1%,
      0.968 41.8%,
      0.991 45.7%,
      1.006 50.1%,
      1.015 55%,
      1.017 63.9%,
      1.001 85.9%,
      1
    );
    --dur-1: 150ms; /* micro feedback */
    --dur-2: 280ms; /* UI state */
    --dur-3: 520ms; /* panels, menus */
    --dur-4: 820ms; /* scroll reveals */
    --stagger: 70ms;

    /* ---- Layers ---- */
    --z-header: 200;
    --z-floating: 300;
    --z-dialog: 1000;
  }

  /* phones with very dense screens: a slightly smaller tile keeps the grain fine instead of blocky */
  @media (min-resolution: 2.5dppx) {
    :root {
      --grain-size: 192px;
    }
  }
}