/**
 * tokens.css — design system tokens (single source of styling truth)
 * All values from docs/design-system.md §2–7. No ad-hoc values anywhere else.
 */

/* ================================================================
   FONTS — self-hosted in assets/fonts/
   ================================================================ */

/* Plus Jakarta Sans — headings/display */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* Inter — body/UI */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   COLOR TOKENS
   ================================================================ */
:root {
  /* Dark anchor values */
  --color-navy-950: #080F1E;
  --color-navy-900: #0D1829;
  --color-navy-800: #162035;
  --color-navy-700: #1E2E47;

  /* Light values */
  --color-white:     #FFFFFF;
  --color-surface:   #F4F6FA;
  --color-surface-2: #E9EDF4;

  /* Accent */
  --color-accent-blue:     #1A7DFF;
  --color-accent-teal:     #00C8A0;
  --color-accent-gradient: linear-gradient(90deg, #1A7DFF 0%, #00C8A0 100%);

  /* Text — light sections */
  --color-text-primary:   #0D1829;
  --color-text-secondary: #4A5A72;
  --color-text-tertiary:  #7A8BA0;

  /* Text — dark sections */
  --color-text-inverse:           #FFFFFF;
  --color-text-inverse-secondary: #A8BDD4;

  /* Accent text */
  --color-text-accent:      #1A7DFF;
  --color-text-accent-teal: #00B890;

  /* Borders */
  --color-border:      #D4DCE8;
  --color-border-dark: #1E2E47;

  /* States */
  --color-state-focus:   #1A7DFF;
  --color-state-error:   #E03B3B;
  --color-state-success: #00A878;
  --color-state-warning: #E08C00;

  /* Overlay */
  --color-overlay: rgba(8, 15, 30, 0.72);

  /* ================================================================
     TYPOGRAPHY
     ================================================================ */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Size scale */
  --text-xs:      0.75rem;   /* 12px */
  --text-sm:      0.875rem;  /* 14px */
  --text-base:    1rem;      /* 16px */
  --text-md:      1.125rem;  /* 18px */
  --text-lg:      1.25rem;   /* 20px */
  --text-xl:      1.5rem;    /* 24px */
  --text-2xl:     1.875rem;  /* 30px */
  --text-3xl:     2.375rem;  /* 38px */
  --text-4xl:     3rem;      /* 48px */
  --text-5xl:     3.75rem;   /* 60px */
  --text-6xl:     4.75rem;   /* 76px */
  --text-display: 6rem;      /* 96px */

  /* ================================================================
     SPACING SCALE (4px base unit)
     ================================================================ */
  --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;
  --space-32: 128px;

  /* ================================================================
     BORDER RADII
     ================================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ================================================================
     BORDERS
     ================================================================ */
  --border-width:        1px;
  --border-width-accent: 3px;
  --border-default:       1px solid var(--color-border);
  --border-dark:          1px solid var(--color-border-dark);
  --border-accent:        3px solid var(--color-accent-blue);

  /* ================================================================
     SHADOWS
     ================================================================ */
  --shadow-sm:     0 1px 3px rgba(13, 24, 41, 0.08), 0 1px 2px rgba(13, 24, 41, 0.06);
  --shadow-md:     0 4px 16px rgba(13, 24, 41, 0.10), 0 2px 6px rgba(13, 24, 41, 0.08);
  --shadow-lg:     0 12px 40px rgba(13, 24, 41, 0.14), 0 4px 12px rgba(13, 24, 41, 0.10);
  --shadow-accent: 0 4px 20px rgba(26, 125, 255, 0.25);

  /* ================================================================
     MOTION TOKENS
     ================================================================ */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-enter:  600ms;
  --easing-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --easing-enter:    cubic-bezier(0.22, 1, 0.36, 1);

  /* ================================================================
     LAYOUT
     ================================================================ */
  --container-max:    1280px;
  --container-pad-xs: var(--space-6);
  --container-pad-md: var(--space-8);
  --container-pad-xl: var(--space-12);

  /* Section padding shorthand */
  --section-py-mobile:  var(--space-16);  /* 64px */
  --section-py-tablet:  var(--space-20);  /* 80px */
  --section-py-desktop: var(--space-24);  /* 96px */
  --section-py-hero:    var(--space-32);  /* 128px */
}