/* ============================================================
   Euderzr® FFKM Prototype — Design Tokens
   Shared between prototype (tokens.css) and production (tokens.css)
   Reference: docs/04-architecture.md §11.2
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --color-brand-500: #0B5FFF;   /* primary CTA, tech blue */
  --color-brand-600: #0A52E0;
  --color-brand-700: #083EB0;   /* hover / dark */
  --color-brand-050: #EAF2FF;   /* tint background */
  --color-brand-100: #D6E5FF;

  /* ---- Neutrals ---- */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F7FA;       /* section alternate */
  --color-bg-dark: #0E1B33;      /* deep navy sections */
  --color-bg-dark-2: #13244a;
  --color-surface: #FFFFFF;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;

  --color-text: #1A2230;         /* primary text */
  --color-text-muted: #5B6675;   /* secondary text */
  --color-text-on-dark: #E8EEF7;
  --color-text-on-dark-muted: #9FB0C9;

  /* ---- Semantic ---- */
  --color-success: #1F9D55;
  --color-success-bg: #E7F6EE;
  --color-danger: #D7263D;
  --color-danger-bg: #FDEAEC;
  --color-warning: #B7791F;
  --color-warning-bg: #FCF3E3;
  --color-info: #0B5FFF;
  --color-info-bg: #EAF2FF;

  /* ---- Typography ---- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xxs: 0.72rem;   /* 11.5px */
  --fs-xs: 0.8rem;     /* 12.8px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */
  --fs-4xl: 3.75rem;   /* 60px */

  --lh-tight: 1.12;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing (4px base grid) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-card: 0 1px 3px rgba(16, 24, 40, 0.10);
  --shadow-card-hover: 0 8px 24px rgba(16, 24, 40, 0.14);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 16px 48px rgba(14, 27, 51, 0.18);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 880px;
  --header-h: 68px;
  --header-h-mobile: 60px;

  /* ---- Breakpoints (for reference in media queries) ---- */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-sticky-bar: 90;
  --z-drawer: 200;
  --z-toast: 300;
}