/**
 * CoreFlowMC Design Tokens
 * Option A: Offshore Navy
 * Source: docs/CoreFlowMC Visual Identity & Design System.md
 */

:root {
  /* === COLORS === */

  /* Primary: Navy */
  --color-primary: #0B2545;
  --color-primary-rgb: 11, 37, 69;

  /* Secondary: Teal */
  --color-secondary: #15788C;
  --color-secondary-text: #0F6577;
  --color-secondary-rgb: 21, 120, 140;

  /* Ink: Body text */
  --color-ink: #0E1B2C;
  --color-ink-soft: #42526A;

  /* Grounds */
  --color-ground: #FFFFFF;
  --color-ground-alt: #EEF2F6;

  /* Lines and borders */
  --color-line: #D5DDE6;

  /* Accent: Copper */
  --color-accent: #B5622B;
  --color-accent-text: #9A4F1E;

  /* On navy background */
  --color-on-primary: #FFFFFF;
  --color-on-primary-soft: #C9D6E4;
  --color-on-primary-meta: #8FA6BF;
  --color-on-primary-secondary: #5CC2D6;
  --color-on-primary-accent: #E59A63;

  /* Semantic colors */
  --color-success: #0F6577;
  --color-warning: #B5622B;
  --color-error: #9A2B2B;

  /* === TYPOGRAPHY === */

  /* Font families */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-text: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-data: "IBM Plex Mono", "SF Mono", Monaco, "Courier New", monospace;

  /* Font sizes - desktop */
  --text-display: 3.25rem;     /* 52px */
  --text-h1: 2.5rem;           /* 40px */
  --text-h2: 1.875rem;         /* 30px */
  --text-h3: 1.25rem;          /* 20px */
  --text-lead: 1.25rem;        /* 20px */
  --text-body: 1.0625rem;      /* 17px */
  --text-small: 0.875rem;      /* 14px */
  --text-eyebrow: 0.75rem;     /* 12px */
  --text-data: 0.875rem;       /* 14px */

  /* Line heights */
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-snug: 1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* === LAYOUT === */

  /* Spacing scale */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* Layout constraints */
  --page-max: 1200px;
  --measure: 680px;      /* max width for reading text */
  --gutter: 1.5rem;      /* 24px */

  /* Page margins */
  --page-margin: 1.5rem;       /* 24px mobile */
  --page-margin-md: 3rem;      /* 48px tablet */
  --page-margin-lg: 4.5rem;    /* 72px desktop */

  /* Section padding */
  --section-padding: 4rem;     /* 64px mobile */
  --section-padding-lg: 6rem;  /* 96px desktop */

  /* === UI === */

  /* Border radius */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 8px;

  /* Borders */
  --border-width: 1px;
  --border: var(--border-width) solid var(--color-line);
  --border-thick: 2px solid var(--color-line);

  /* Focus ring */
  --focus-ring: 2px solid var(--color-secondary);
  --focus-offset: 2px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(11, 37, 69, 0.08);
  --shadow-md: 0 4px 12px rgba(11, 37, 69, 0.12);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* === BREAKPOINTS === */
  /* Reference only - use in media queries */
  /* --bp-sm: 640px; */
  /* --bp-md: 1024px; */
  /* --bp-lg: 1280px; */
}

/* Mobile overrides */
@media (max-width: 640px) {
  :root {
    --text-display: 2.25rem;   /* 36px */
    --text-h1: 1.875rem;       /* 30px */
    --text-h2: 1.5rem;         /* 24px */
    --text-h3: 1.125rem;       /* 18px */
    --text-lead: 1.125rem;     /* 18px */
    --text-body: 1rem;         /* 16px */
    --text-data: 0.8125rem;    /* 13px */
  }
}