/* ============================================
   CPDS DESIGN TOKENS — Version B foundation
   Single source of truth for colour, type,
   spacing, radius, shadow, layout, motion.
   No hardcoded brand values outside this file.
   ============================================ */

:root {
  /* ---------- COLOUR ---------- */

  /* Brand — Teal (primary identity) */
  --colour-teal-light: #6EC1E4;
  --colour-teal-deep:  #3AA3D4;
  --colour-teal-soft:  rgba(110, 193, 228, 0.13);

  /* Brand — Charcoal (authority) */
  --colour-charcoal:       #0c0c0c;
  --colour-charcoal-soft:  #1a1a1a;
  --colour-charcoal-deeper:#080808;

  /* Brand — Indigo (modern SaaS depth) */
  --colour-indigo:       #5B4FE9;
  --colour-indigo-deep:  #4A40C8;
  --colour-indigo-soft:  rgba(91, 79, 233, 0.14);

  /* Brand — Coral (accent, energy) */
  --colour-coral:        #FF6B47;
  --colour-coral-soft:   #FF8E47;
  --colour-coral-tint:   rgba(255, 107, 71, 0.14);

  /* Brand — Mint (sparing) */
  --colour-mint:         #C3F0D8;

  /* Neutrals */
  --colour-white:        #FFFFFF;
  --colour-off-white:    #FAFAFA;
  --colour-bg-grey:      #F6F6F6;
  --colour-border:       #E4E4E4;
  --colour-border-soft:  #ECECEC;

  /* Text */
  --colour-text-primary:        #0c0c0c;
  --colour-text-secondary:      #444444;
  --colour-text-tertiary:       #888888;
  --colour-text-inverse:        #FFFFFF;
  --colour-text-inverse-strong: rgba(255, 255, 255, 0.92);
  --colour-text-inverse-muted:  rgba(255, 255, 255, 0.7);
  --colour-text-inverse-faint:  rgba(255, 255, 255, 0.55);

  /* Surfaces */
  --surface-primary:           #FFFFFF;
  --surface-secondary:         #FAFAFA;
  --surface-dark:              #0c0c0c;
  --surface-dark-elevated:     #141414;
  --surface-overlay-light:     rgba(255, 255, 255, 0.04);
  --surface-overlay-light-2:   rgba(255, 255, 255, 0.08);
  --surface-overlay-light-hov: rgba(255, 255, 255, 0.14);
  --surface-overlay-dark:      rgba(12, 12, 12, 0.5);

  /* Gradients — solid */
  --gradient-teal:         linear-gradient(135deg, #6EC1E4 0%, #3AA3D4 100%);
  --gradient-indigo-teal:  linear-gradient(135deg, #5B4FE9 0%, #3AA3D4 100%);
  --gradient-coral:        linear-gradient(135deg, #FF6B47 0%, #FF8E47 100%);

  /* Gradients — text */
  --gradient-text-cool: linear-gradient(135deg, #6EC1E4 0%, #5B4FE9 100%);
  --gradient-text-warm: linear-gradient(135deg, #6EC1E4 0%, #FF6B47 100%);

  /* Atmospheric (radial) */
  --atmosphere-cool:
    radial-gradient(circle at 18% 22%, rgba(91, 79, 233, 0.20) 0%, transparent 55%),
    radial-gradient(circle at 82% 78%, rgba(255, 107, 71, 0.10) 0%, transparent 55%);
  --atmosphere-warm:
    radial-gradient(circle at 50% 0%, rgba(255, 107, 71, 0.14) 0%, transparent 55%);
  --atmosphere-deep:
    radial-gradient(circle at 50% 100%, rgba(91, 79, 233, 0.18) 0%, transparent 55%);
  --atmosphere-teal:
    radial-gradient(circle at 70% 30%, rgba(110, 193, 228, 0.12) 0%, transparent 55%);

  /* ---------- TYPOGRAPHY ---------- */

  --font-family-base: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* Type scale (desktop) */
  --font-size-display:      64px;
  --font-size-h1:           60px;
  --font-size-h2:           52px;
  --font-size-h2-section:   44px;
  --font-size-h3:           28px;
  --font-size-h4:           22px;
  --font-size-body-large:   18px;
  --font-size-body:         16px;
  --font-size-body-small:   14px;
  --font-size-caption:      13px;
  --font-size-micro:        12px;
  --font-size-eyebrow:      11px;

  /* Line heights */
  --line-height-display: 1.02;
  --line-height-heading: 1.08;
  --line-height-tight:   1.3;
  --line-height-body:    1.6;
  --line-height-loose:   1.7;

  /* Letter spacing */
  --letter-spacing-display: -0.035em;
  --letter-spacing-heading: -0.025em;
  --letter-spacing-tight:   -0.015em;
  --letter-spacing-eyebrow: 0.12em;
  --letter-spacing-label:   0.06em;

  /* ---------- SPACING (4px base) ---------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;

  /* ---------- RADIUS ---------- */

  --radius-sm:     8px;
  --radius-md:     10px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    20px;
  --radius-3xl:    24px;
  --radius-pill:   100px;
  --radius-circle: 9999px;

  /* ---------- ELEVATION ---------- */

  --shadow-subtle:      0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card:        0 4px 16px -4px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-elevated:    0 16px 40px -16px rgba(0, 0, 0, 0.14), 0 4px 12px -4px rgba(0, 0, 0, 0.06);
  --shadow-deep:        0 30px 80px rgba(0, 0, 0, 0.4);
  --shadow-coral-glow:  0 20px 40px rgba(255, 107, 71, 0.30);
  --shadow-indigo-glow: 0 24px 50px rgba(91, 79, 233, 0.30);
  --shadow-teal-glow:   0 16px 36px rgba(58, 163, 212, 0.28);

  /* ---------- LAYOUT ---------- */

  --container-max-width:        1200px;
  --container-padding-desktop:  32px;
  --container-padding-tablet:   24px;
  --container-padding-mobile:   20px;

  --header-height:              68px;
  /* Solid nav surface tuned to match the navy square in CPDS_Logo_Dark_v2.png. */
  --colour-nav-dark:            #1f1f29;
  --header-bg:                  var(--colour-nav-dark);
  --header-border:              rgba(255, 255, 255, 0.08);

  /* ---------- MOTION ---------- */

  --transition-fast:   0.18s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;
  --easing-spring:     cubic-bezier(0.34, 1.4, 0.64, 1);
  --easing-snap:       cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- MOBILE TYPE SCALE ---------- */

@media (max-width: 767px) {
  :root {
    --font-size-display:    40px;
    --font-size-h1:         38px;
    --font-size-h2:         34px;
    --font-size-h2-section: 30px;
    --font-size-h3:         24px;
    --font-size-h4:         20px;
    --font-size-body-large: 16px;
  }
}