/*
 * ============================================================
 *  TOP 1 OIL — DESIGN TOKENS
 *  File: assets/css/tokens.css
 *  Version: 1.0 — synced from Figma Design System v1.0
 *
 *  This file contains ONLY CSS custom properties.
 *  No classes, no rules — just variables.
 *
 *  UPDATE PROCESS:
 *  1. Change values here when Figma design system updates
 *  2. Everything in global.css and pages/*.css updates
 *     automatically — no other files need to change
 *
 *  ENQUEUE IN functions.php:
 *  wp_enqueue_style('t1-tokens',
 *    get_stylesheet_directory_uri() . '/assets/css/tokens.css',
 *    [], '1.0.0'
 *  );
 * ============================================================
 */

:root {

  /* ── Brand colours ───────────────────────────────────────── */
  --t1-red:              #CC092F;   /* Primary CTAs, motorsport energy */
  --t1-red-dark:         #8C0020;   /* Hover states */
  --t1-blue:             #001CA8;   /* Trust, reliability */
  --t1-blue-dark:        #00138A;   /* Hover states */
  --t1-yellow:           #FEE000;   /* Energy, optimism */
  --t1-yellow-dark:      #C8A000;   /* Hover states */

  /* ── Neutral palette ─────────────────────────────────────── */
  --t1-neutral-50:       #F5F5F5;   /* Backgrounds */
  --t1-neutral-200:      #D0D0D0;   /* Borders */
  --t1-neutral-400:      #9A9A9A;   /* Helper / placeholder text */
  --t1-neutral-600:      #5C5C5C;   /* Body text */
  --t1-neutral-900:      #111111;   /* Headings */
  --t1-white:            #FFFFFF;
  --t1-black:            #000000;

  /* ── Semantic / state colours ────────────────────────────── */
  --t1-error-bg:         #FCEEF1;
  --t1-error-text:       #8C0020;
  --t1-error-border:     rgba(204, 9, 47, 0.267);
  --t1-warning-bg:       #FFFAE0;
  --t1-warning-text:     #6B5000;
  --t1-warning-border:   #C8A000;
  --t1-info-bg:          #E6E9FC;
  --t1-info-text:        #00138A;
  --t1-info-border:      rgba(0, 28, 168, 0.267);
  --t1-success-bg:       #EDFAF3;
  --t1-success-text:     #1A5C2A;
  --t1-success-accent:   #1A7A3C;

  /* ── Typography — font families ─────────────────────────── */
  --t1-font-display:     'League Spartan', sans-serif;
  --t1-font-body:        'Montserrat', sans-serif;
  --t1-font-ui:          'Inter', sans-serif;

  /* ── Typography — font sizes ─────────────────────────────── */
  --t1-text-display:     48px;   /* Display / Hero — League Spartan 700 */
  --t1-text-h1:          32px;   /* H1 — League Spartan 700 */
  --t1-text-h2:          24px;   /* H2 — League Spartan 700 */
  --t1-text-h3:          20px;   /* H3 — League Spartan 500 */
  --t1-text-body:        13px;   /* Body — Montserrat 400 */
  --t1-text-sm:          12px;   /* Small — Montserrat 400 */
  --t1-text-xs:          11px;   /* XS — Inter/Montserrat */
  --t1-text-label:       10px;   /* Label / badge — Montserrat 600 */
  --t1-text-btn-lg:      16px;   /* Button large — Montserrat 600 */
  --t1-text-btn-md:      13px;   /* Button default — Montserrat 500 */
  --t1-text-btn-sm:      11px;   /* Button small — Montserrat 500 */

  /* ── Typography — letter spacing ────────────────────────── */
  --t1-tracking-display: -0.96px;
  --t1-tracking-h1:      -0.32px;
  --t1-tracking-label:    1.3px;
  --t1-tracking-badge:    0.22px;
  --t1-tracking-btn:      0.26px;

  /* ── Spacing — 4px base unit ─────────────────────────────── */
  --t1-space-1:           4px;   /* xs  */
  --t1-space-2:           8px;   /* sm  */
  --t1-space-4:          16px;   /* md  */
  --t1-space-6:          24px;   /* lg  */
  --t1-space-8:          32px;   /* xl  */
  --t1-space-12:         48px;   /* 2xl */
  --t1-space-16:         64px;   /* 3xl */
  --t1-space-20:         80px;   /* hero margin */

  /* ── Border radius ───────────────────────────────────────── */
  --t1-radius-none:       0px;
  --t1-radius-xs:         2px;
  --t1-radius-sm:         4px;
  --t1-radius-md:         8px;   /* ★ buttons, inputs */
  --t1-radius-lg:        12px;   /* ★ cards, panels  */
  --t1-radius-xl:        16px;
  --t1-radius-2xl:       24px;
  --t1-radius-pill:     999px;   /* badges, avatars, toggles */

  /* ── Shadows ─────────────────────────────────────────────── */
  --t1-shadow-card:      0px 7px 15px rgba(0, 0, 0, 0.15);
  --t1-shadow-focus-red: 0px 0px 0px 3px rgba(204, 9, 47, 0.15);

  /* ── Transitions ─────────────────────────────────────────── */
  --t1-transition:       0.2s ease;
  --t1-transition-slow:  0.35s ease;

  /* ── Hero gradients ──────────────────────────────────────── */
  --t1-overlay-light: linear-gradient(
    to bottom,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.35) 45%,
    rgba(0,0,0,0.55) 100%
  );
  --t1-overlay-dark: linear-gradient(
    to bottom,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.55) 45%,
    rgba(0,0,0,0.70) 100%
  );

  /* ── Layout grid ─────────────────────────────────────────── */
  --t1-max-width:       1280px;
  --t1-gutter-desktop:   24px;
  --t1-gutter-tablet:    16px;
  --t1-gutter-mobile:    16px;
  --t1-margin-desktop:   80px;
  --t1-margin-tablet:    32px;
  --t1-margin-mobile:    16px;
}