/* ==========================================================================
   OMC Cloud — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Change brand colors here — see README "How to modify colors".
   ========================================================================== */

:root {
  /* ---- Brand: Navy / Graphite ---- */
  --color-navy-950: #0A0E1A;
  --color-navy-900: #0F1524;
  --color-navy-800: #161D30;
  --color-navy-700: #212A42;
  --color-navy-600: #333F5C;

  /* ---- Accent: Technical Blue (interactive) ---- */
  --color-accent-700: #2158C4;
  --color-accent-600: #2F6FED;
  --color-accent-500: #4A82F5;
  --color-accent-400: #7BA3F8;
  --color-accent-100: #E8F0FE;

  /* ---- Status ---- */
  --color-success-600: #16A34A;
  --color-success-700: #15803D;
  --color-success-100: #E7F8ED;
  --color-warning-600: #D97706;
  --color-warning-700: #B45309;
  --color-warning-100: #FEF3E2;
  --color-danger-600: #DC2626;
  --color-danger-100: #FDECEC;

  /* ---- Neutrals ---- */
  --color-white: #FFFFFF;
  --color-gray-50:  #F7F8FA;
  --color-gray-100: #EEF1F5;
  --color-gray-200: #DFE3EA;
  --color-gray-300: #C3C9D4;
  --color-gray-500: #737C8C;
  --color-gray-600: #5B6472;
  --color-gray-700: #414A5A;
  --color-gray-900: #171B24;

  /* ---- Semantic aliases (use these in components) ---- */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-gray-50);
  --color-surface: var(--color-white);
  --color-border: var(--color-gray-200);
  --color-text: var(--color-gray-900);
  /* gray-600, not gray-500: gray-500 is 4.21:1 on white, just under the 4.5:1 AA text threshold */
  --color-text-muted: var(--color-gray-600);
  --color-text-on-dark: var(--color-white);
  --color-text-on-dark-muted: #9AA3B2;
  --color-link: var(--color-accent-600);
  --color-focus-ring: rgba(47, 111, 237, 0.35);

  /* ---- Typography ----
     System-first stack: zero font-load requests (performance), consistent
     premium look per OS. Swap here if a licensed/webfont is approved later. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-4xl:  clamp(2.25rem, 4vw, 2.875rem);
  --text-5xl:  clamp(2.5rem, 5vw, 3.5rem);

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

  --leading-tight: 1.15;
  --leading-snug:  1.35;
  --leading-normal: 1.6;

  /* ---- Spacing (4px base unit) ---- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  --section-padding-y: clamp(3.5rem, 6vw, 6rem);
  --container-max: 1200px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Shadow (cool-toned, navy-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(15, 21, 36, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 21, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 21, 36, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ---- Motion ---- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 320ms ease;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}