/* ============================================================
   tokens.css — Tojaan design tokens
   Brand colors + fonts derived from the Tojaan logo.
   Universal scales (spacing, radius, type, shadow, transition)
   are fixed across all Canada HiTech projects — do not change.
   ============================================================ */

:root {
  /* ---- BRAND COLORS (derived from logo) ----
     Logo wordmark:  #181854 (indigo-navy)
     Logo mark gradient: #185490 (steel) -> #2588c0 / #249cd8 (electric blue) */
  --color-primary:        #1b4f8a;   /* steel azure — buttons, links, key UI (8.3:1 on white) */
  --color-primary-deep:   #181854;   /* logo indigo-navy — headings accents, footer, depth */
  --color-primary-soft:   rgba(27, 79, 138, 0.16); /* focus glow / tints */
  --color-accent:         #2596d4;   /* electric blue — large text, icons, borders, hover cues */
  --color-accent-deep:    #1577ad;   /* accent for normal-size text/links on white (4.9:1) */
  --color-accent-soft:    rgba(37, 150, 212, 0.12);

  /* ---- NEUTRALS ---- */
  --color-text:           #0f1729;   /* near-black navy-tinted (17:1 on white) */
  --color-text-muted:     #51607a;   /* slate secondary text (6.4:1 on white) */
  --color-text-inverse:   #f7fafc;   /* near-white on dark surfaces */
  --color-text-inverse-soft: rgba(247, 250, 252, 0.82); /* muted white for dark heroes */
  --color-border-light:   rgba(255, 255, 255, 0.55);     /* outline on dark imagery */
  --color-bg:             #ffffff;   /* page background */
  --color-surface:        #f3f7fc;   /* very light blue tint — alternating sections */
  --color-surface-2:      #eaf1fa;   /* slightly deeper tint for chips/plates */
  --color-border:         #dbe3ee;   /* crisp 1px cool border */
  --color-border-strong:  #c2cfe0;

  /* ---- SEMANTIC COLORS ---- */
  --color-success:        #16783f;   /* AA on white (5.5:1) and on success tint */
  --color-warning:        #b7791f;
  --color-danger:         #c2362b;
  --color-info:           #1b6fae;

  /* ---- DARK FOOTER ZONE (project tokens) ---- */
  --color-footer-bg:      #141441;   /* deepened logo indigo — never pure black */
  --color-footer-text:    #f7fafc;
  --color-footer-muted:   #aab4d6;   /* light periwinkle (7.6:1 on footer) */
  --color-footer-border:  rgba(255, 255, 255, 0.12);

  /* ---- EFFECTS (project tokens) ---- */
  --gradient-brand:       linear-gradient(120deg, #181854 0%, #185490 55%, #2596d4 100%);
  --gradient-accent:      linear-gradient(120deg, #1b4f8a 0%, #2596d4 100%);
  --gradient-accent-light: linear-gradient(120deg, #5cc0ef 0%, #2596d4 100%); /* brighter, for dark hero text */

  /* Hero dark scrim (over the cinematic photo slider) — keeps white text legible */
  --overlay-hero:         linear-gradient(100deg, rgba(10,12,28,0.90) 0%, rgba(10,12,28,0.66) 46%, rgba(12,14,34,0.34) 100%);
  --overlay-hero-mobile:  linear-gradient(180deg, rgba(10,12,28,0.74) 0%, rgba(10,12,28,0.88) 100%);

  /* Imagery / scrim */
  --color-scrim:          rgba(15, 18, 41, 0.55);
  --gradient-card-veil:   linear-gradient(180deg, rgba(15,18,41,0) 45%, rgba(15,18,41,0.55) 100%);
  --color-on-media:       rgba(255,255,255,0.92);

  /* Semantic tints (for status/validation surfaces) */
  --color-danger-soft:    rgba(194,54,43,0.16);
  --color-danger-tint:    rgba(194,54,43,0.08);
  --color-danger-line:    rgba(194,54,43,0.30);
  --color-success-tint:   rgba(22,120,63,0.10);
  --color-success-line:   rgba(22,120,63,0.30);

  /* ---- TYPOGRAPHY (from font catalog) ---- */
  --font-heading:         'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:            ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ---- SPACING — universal ---- */
  --space-xs:   4px;   --space-sm:   8px;
  --space-md:  16px;   --space-lg:  24px;
  --space-xl:  32px;   --space-2xl: 48px;
  --space-3xl: 64px;

  /* ---- RADIUS — universal (favor small for this sharp brand) ---- */
  --radius-sm:   4px;  --radius-md:   8px;
  --radius-lg:  16px;  --radius-pill: 999px;

  /* ---- TYPE SCALE — universal ---- */
  --fs-xs:  12px;  --fs-sm:  14px;  --fs-md:   16px;
  --fs-lg:  18px;  --fs-xl:  24px;  --fs-2xl:  32px;
  --fs-3xl: 48px;  --fs-4xl: 64px;

  /* ---- SHADOWS — universal ---- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 8px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 24px rgba(0,0,0,.12);

  /* ---- TRANSITIONS — universal ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ---- BREAKPOINTS — reference only (cannot be used in @media)
     sm 576 | md 768 | lg 992 | xl 1200 | 2xl 1440 ---- */
}