/* Granite Auto Care — brand token layer.
 *
 * Single source of truth for palette, type, spacing, and motion. Loaded before
 * every other stylesheet; site.css and the landing-*.css bundle consume these and define no
 * raw colour values of their own.
 *
 * Palette values were sampled programmatically from the vehicle wrap artwork
 * (GRANITE.png), not picked by eye — the "sampled from" notes below record which
 * region of the wrap each value came from so they can be re-derived.
 *
 * Contains no @media rules by design: breakpoints belong to the stylesheets that
 * lay things out, and core.tests pins the project to exactly 640/768/1024.
 */

:root {
    /* --- Blues: the wrap's dominant field ------------------------------- */
    --g-navy-950: #000b26;  /* deepest wrap field — page base, footer      */
    --g-navy-900: #001040;  /* dominant blue (largest sampled cluster)     */
    --g-navy-700: #011d5e;  /* mid blue — cards, raised surfaces          */
    --g-blue-500: #2e4880;  /* highlight blue — borders, hover            */

    /* --- Red: the banner and URL pill ----------------------------------- */
    --g-red: #c8000a;       /* primary CTA, urgency                        */
    --g-red-dark: #900000;  /* pill shadow — hover/pressed                 */

    /* --- Gold: the "AUTO CARE" wordmark and icon rings ------------------ */
    --g-gold: #f8a000;      /* accent, icon rings                          */
    --g-gold-deep: #e8b008; /* ring gradient partner                       */

    /* --- Chrome: bevel and wrap white ----------------------------------- */
    --g-chrome-100: #f9f9f6; /* wrap white — headline text, page bg        */
    --g-chrome-300: #e2e3e6; /* bevel light                                */
    --g-chrome-500: #c7cfdf; /* bevel mid — rules, muted text on dark      */

    /* --- Semantic roles -------------------------------------------------
     * Components reference these, never the raw scale above, so a palette
     * revision is a one-line change here.
     */
    --g-surface: var(--g-chrome-100);
    --g-surface-raised: #ffffff;
    --g-surface-dark: var(--g-navy-900);
    --g-surface-darker: var(--g-navy-950);

    --g-ink: var(--g-navy-950);              /* body text on light         */
    --g-ink-muted: #4a4d55;                  /* secondary text on light    */
    --g-ink-inverse: var(--g-chrome-100);    /* body text on dark          */
    --g-ink-inverse-muted: var(--g-chrome-500);

    --g-line: rgba(0, 16, 64, 0.14);         /* hairline on light          */
    --g-line-inverse: rgba(199, 207, 223, 0.22);

    /* Gold is an accent only. It fails WCAG AA as text on light surfaces,
     * so it is reserved for rules, rings, and large display type on dark. */
    --g-accent: var(--g-gold);
    --g-action: var(--g-red);
    --g-action-hover: var(--g-red-dark);

    /* --- Chrome gradient: recreates the wrap's bevelled wordmark -------- */
    --g-chrome-gradient: linear-gradient(
        180deg,
        #ffffff 0%,
        var(--g-chrome-100) 30%,
        var(--g-chrome-500) 52%,
        #8fa0bd 56%,
        var(--g-chrome-300) 64%,
        #ffffff 82%,
        var(--g-chrome-300) 100%
    );

    --g-gold-gradient: linear-gradient(
        180deg,
        #ffd77a 0%,
        var(--g-gold) 42%,
        var(--g-gold-deep) 70%,
        #b97400 100%
    );

    /* --- Typography ------------------------------------------------------
     * Display face mirrors the wrap: heavy, condensed, italic. Body face is
     * the same superfamily so they harmonise rather than compete.
     */
    --g-font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --g-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

    --g-weight-body: 400;
    --g-weight-medium: 500;
    --g-weight-semi: 600;
    --g-weight-bold: 700;
    --g-weight-heavy: 800;

    /* Fluid scale. clamp() carries the sizing between breakpoints so new
     * layout breakpoints are never needed just to resize text. */
    --g-step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
    --g-step-0: clamp(1rem, 0.95rem + 0.24vw, 1.13rem);
    --g-step-1: clamp(1.2rem, 1.12rem + 0.39vw, 1.42rem);
    --g-step-2: clamp(1.44rem, 1.32rem + 0.61vw, 1.78rem);
    --g-step-3: clamp(1.73rem, 1.54rem + 0.93vw, 2.23rem);
    --g-step-4: clamp(2.07rem, 1.79rem + 1.39vw, 2.79rem);
    --g-step-5: clamp(2.49rem, 2.07rem + 2.06vw, 3.48rem);
    --g-step-6: clamp(2.99rem, 2.38rem + 3.00vw, 4.35rem);

    --g-tracking-tight: -0.01em;
    --g-tracking-wide: 0.08em;   /* the wrap's spaced-out small caps       */
    --g-leading-tight: 1.05;
    --g-leading-snug: 1.25;
    --g-leading-body: 1.6;

    /* --- Spacing --------------------------------------------------------- */
    --g-space-3xs: 0.25rem;
    --g-space-2xs: 0.5rem;
    --g-space-xs: 0.75rem;
    --g-space-s: 1rem;
    --g-space-m: 1.5rem;
    --g-space-l: 2rem;
    --g-space-xl: 3rem;
    --g-space-2xl: 4rem;
    --g-space-3xl: 6rem;
    --g-section-y: clamp(3rem, 8vw, 6rem);

    --g-container: 1140px;
    --g-container-pad: clamp(1rem, 4vw, 2rem);

    /* --- Shape and depth -------------------------------------------------
     * The wrap has hard, angular edges. Radii stay small on purpose; soft
     * rounded shapes are the competitor's language, not ours.
     */
    --g-radius-xs: 2px;
    --g-radius-s: 4px;
    --g-radius-m: 6px;
    --g-radius-pill: 999px;
    --g-bevel: 3px;  /* chrome edge thickness */

    --g-shadow-s: 0 1px 2px rgba(0, 11, 38, 0.16);
    --g-shadow-m: 0 4px 12px rgba(0, 11, 38, 0.18);
    --g-shadow-l: 0 12px 32px rgba(0, 11, 38, 0.26);
    --g-shadow-inset-chrome: inset 0 1px 0 rgba(255, 255, 255, 0.55),
                             inset 0 -1px 0 rgba(0, 11, 38, 0.35);

    /* --- Motion ----------------------------------------------------------
     * Parallax amplitude is capped here rather than at each call site, so the
     * whole page's motion budget is one number. See landing-motion.css.
     */
    --g-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --g-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --g-duration-fast: 140ms;
    --g-duration: 240ms;
    --g-duration-slow: 420ms;
    --g-parallax-max: 12vh;  /* hard ceiling on any single layer's travel */

    --g-focus-ring: 0 0 0 3px rgba(248, 160, 0, 0.55);
}

/* Users who ask for less motion get none. Declared here as well as in
 * landing-motion.css so the guarantee holds even if a stylesheet is omitted. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --g-duration-fast: 0ms;
        --g-duration: 0ms;
        --g-duration-slow: 0ms;
        --g-parallax-max: 0px;
    }
}