@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Saira:ital,wght@0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ===== fonts.css ===== */
/* ============================================================
   IMMACULATE DETAILING — WEBFONTS
   ------------------------------------------------------------
   SUBSTITUTION NOTE: The Canva brand kit fonts were not
   supplied as files. These Google Fonts are chosen as close
   matches and should be swapped for the exact brand fonts
   when those files are provided.

   - Saira / Saira Condensed  ≈ the wide, squared, technical
     wordmark look of the ID logo. Used for aggressive,
     all-caps italic headers and large pricing numbers.
   - Hanken Grotesk           ≈ clean, professional body sans.
   ============================================================ */



:root {
  /* Raw font stacks */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif; /* big aggressive headers */
  --font-heading: 'Saira', 'Arial', sans-serif;                  /* section labels, eyebrows */
  --font-price:   'Saira', 'Arial', sans-serif;                  /* pricing numbers */
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; /* body copy */
}

/* ===== colors.css ===== */
/* ============================================================
   IMMACULATE DETAILING — COLOR TOKENS
   ------------------------------------------------------------
   Blue = trust, expertise, premium (dominant brand color)
   Gold = HIGH-TIER PRICE CALLOUTS ONLY (never warnings/errors)
   Never weight gold and blue equally — blue always dominates.
   Gold always carries DARK text on it (white-on-gold is unreadable).
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --id-blue:        #0057B8;  /* primary — headers, badges, key UI */
  --id-blue-deep:   #004291;  /* pressed / gradient bottom */
  --id-blue-bright: #1E74E6;  /* hover / gradient top, accents on dark */
  --id-white:       #FFFFFF;
  --id-black:       #111111;  /* body text, dark backgrounds */
  --id-gold:        #C9A227;  /* PREMIUM TIER ONLY — fills, ribbons, accents */
  --id-gold-deep:   #8F7320;  /* premium price text on light (legibility) */
  --id-gold-bright: #E6C964;  /* metallic sheen highlight */
  /* Legacy aliases — the premium accent is now GOLD (was red). Kept so older
     references keep working; both now resolve to gold. */
  --id-red:         var(--id-gold);
  --id-red-deep:    var(--id-gold-deep);

  /* ---- Neutral ramp ---- */
  --id-gray-050:  #F5F5F5;  /* secondary backgrounds, dividers */
  --id-gray-100:  #ECECEC;
  --id-gray-200:  #DCDCDC;
  --id-gray-300:  #C4C4C4;
  --id-gray-400:  #9A9A9A;
  --id-gray-500:  #6E6E6E;
  --id-gray-600:  #4A4A4A;
  --id-gray-700:  #2C2C2C;
  --id-gray-900:  #111111;

  /* The metallic "D" of the logo — silver chrome */
  --id-silver-1: #FFFFFF;
  --id-silver-2: #E4E7EB;
  --id-silver-3: #B7BEC8;

  /* ---- Semantic surfaces ---- */
  --surface-page:      var(--id-white);
  --surface-subtle:    var(--id-gray-050);
  --surface-card:      var(--id-white);
  --surface-dark:      var(--id-black);
  --surface-brand:     var(--id-blue);
  --surface-brand-deep:var(--id-blue-deep);

  /* ---- Semantic text ---- */
  --text-body:      var(--id-black);
  --text-muted:     var(--id-gray-500);
  --text-on-dark:   var(--id-white);
  --text-on-brand:  var(--id-white);
  --text-brand:     var(--id-blue);
  --text-price:     var(--id-black);     /* standard prices */
  --text-price-hi:  var(--id-gold-deep);  /* premium-tier prices */

  /* ---- Borders / dividers ---- */
  --border-subtle:  var(--id-gray-200);
  --border-strong:  var(--id-black);
  --border-brand:   var(--id-blue);

  /* ---- Brand gradients ---- */
  --grad-blue:   linear-gradient(160deg, var(--id-blue-bright) 0%, var(--id-blue) 45%, var(--id-blue-deep) 100%);
  --grad-chrome: linear-gradient(150deg, var(--id-silver-1) 0%, var(--id-silver-2) 50%, var(--id-silver-3) 100%);
  --grad-dark:   linear-gradient(160deg, #1A1A1A 0%, var(--id-black) 100%);
  /* Metallic gold — premium ribbons / flags (use DARK text on top) */
  --grad-gold:   linear-gradient(150deg, var(--id-gold-bright) 0%, var(--id-gold) 48%, var(--id-gold-deep) 100%);
}

/* ===== typography.css ===== */
/* ============================================================
   IMMACULATE DETAILING — TYPOGRAPHY TOKENS
   ------------------------------------------------------------
   Headers: bold, italic, ALL-CAPS — aggressive & confident.
   Body:    clean sans, sentence case, professional.
   Prices:  large, heavy, command attention.
   ============================================================ */

:root {
  /* ---- Type scale (px) ---- */
  --fs-eyebrow:   14px;
  --fs-label:     16px;
  --fs-body-sm:   15px;
  --fs-body:      17px;
  --fs-body-lg:   20px;
  --fs-h4:        24px;
  --fs-h3:        32px;
  --fs-h2:        44px;
  --fs-h1:        64px;
  --fs-display:   88px;

  /* Pricing numbers — they command attention */
  --fs-price-sm:  34px;
  --fs-price:     56px;
  --fs-price-lg:  84px;

  /* ---- Weights ---- */
  --fw-body:      400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-black:     800; /* @kind font */
  --fw-ultra:     900; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:     0.95; /* @kind other */
  --lh-snug:      1.1; /* @kind other */
  --lh-normal:    1.5; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-display:  -0.01em; /* @kind other */
  /* wide tracking for all-caps labels */
  --ls-eyebrow:   0.18em; /* @kind other */
  --ls-label:     0.08em; /* @kind other */
}

/* ---- Reusable header treatment ---- */
.id-display {
  font-family: var(--font-display);
  font-weight: var(--fw-ultra);
  font-style: italic;
  text-transform: uppercase;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.id-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--fs-eyebrow);
}
.id-body {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-normal);
  font-size: var(--fs-body);
}
.id-price {
  font-family: var(--font-price);
  font-weight: var(--fw-ultra);
  font-style: italic;
  line-height: 1;
}

/* ===== spacing.css ===== */
/* ============================================================
   IMMACULATE DETAILING — SPACING & RADII
   ------------------------------------------------------------
   4px base grid. Tight, structured, print-friendly.
   ============================================================ */

:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---- Corner radii — squared & engineered, never pill-soft ---- */
  --radius-none:  0;
  --radius-sm:    3px;   /* inputs, small chips */
  --radius-md:    6px;   /* cards, buttons */
  --radius-lg:    10px;  /* large panels */
  --radius-badge: 4px;   /* size-class badge */

  /* ---- Container widths ---- */
  --container-sheet: 1080px;  /* pricing sheet */
  --container-text:  680px;

  /* ---- Standard borders ---- */
  --bw-hairline: 1px;
  --bw-rule:     2px;
  --bw-bold:     3px;   /* badge & feature outlines */
}

/* ===== effects.css ===== */
/* ============================================================
   IMMACULATE DETAILING — SHADOWS, MOTION, MISC
   ------------------------------------------------------------
   Restrained, premium. Crisp edges over heavy blur.
   ============================================================ */

:root {
  /* ---- Elevation ---- */
  --shadow-sm:   0 1px 2px rgba(17,17,17,0.08);
  --shadow-md:   0 4px 14px rgba(17,17,17,0.10);
  --shadow-lg:   0 12px 34px rgba(17,17,17,0.16);
  --shadow-card: 0 2px 10px rgba(17,17,17,0.08), 0 0 0 1px rgba(17,17,17,0.04);
  /* Blue glow for premium / active brand elements */
  --shadow-brand: 0 8px 24px rgba(0,87,184,0.28);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,0.25);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(0,87,184,0.35);
}