/* DeepRank Design Tokens
   Central source of truth for colors, spacing, typography, motion. */

:root {
  /* Brand colors — Logo-Orange */
  --color-primary-900: #4a2400;
  --color-primary-800: #6b3500;
  --color-primary-700: #9a4d00;
  --color-primary-600: #c46412;
  --color-primary-500: #f5811f;
  --color-primary-400: #ff9d4d;
  --color-primary-300: #ffc28f;
  --color-primary-100: #ffe4cc;
  --color-primary-50:  #fff5eb;

  /* Accent — warm coral for gradient highlights */
  --color-accent-500:  #ffb547;
  --color-accent-400:  #ffcb73;
  --color-accent-300:  #ffe1a8;

  /* Deep navy — used for dark sections, headings, footer */
  --color-navy-900: #0a1430;
  --color-navy-800: #0f1f4d;
  --color-navy-700: #163080;

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger:  #ef4444;

  --color-ink-900: #0b1020;
  --color-ink-700: #2b3450;
  --color-ink-500: #5b6783;
  --color-ink-400: #8a93ac;
  --color-ink-300: #c0c7d6;
  --color-ink-200: #dfe3ec;
  --color-ink-100: #eef1f7;
  --color-ink-50:  #f7f9fc;
  --color-white:   #ffffff;

  /* Surfaces */
  --surface-page: #ffffff;
  --surface-soft: #fff9f2;
  --surface-card: #ffffff;
  --surface-dark: #0a1430;

  /* Gradients */
  --gradient-hero: radial-gradient(1100px 600px at 8% -10%, rgba(245, 129, 31, 0.16), transparent 60%),
                   radial-gradient(900px 600px at 95% 0%, rgba(255, 181, 71, 0.18), transparent 55%),
                   linear-gradient(180deg, #fff5eb 0%, #ffffff 100%);
  --gradient-cta:  linear-gradient(135deg, #f5811f 0%, #ffb547 100%);
  --gradient-dark: linear-gradient(160deg, #0a1430 0%, #1b2a5e 100%);

  /* Type scale (fluid) */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --fs-xs:  0.78rem;
  --fs-sm:  0.88rem;
  --fs-md:  1rem;
  --fs-lg:  1.13rem;
  --fs-xl:  clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.6rem);
  --fs-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --fs-5xl: clamp(2.6rem, 1.9rem + 4vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.6;
  --lh-loose: 1.75;

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

  /* Spacing scale */
  --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;
  --space-10: 128px;

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 880px;
  --container-pad: clamp(1rem, 3vw, 2rem);

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

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 31, 77, 0.06), 0 1px 3px rgba(15, 31, 77, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(15, 31, 77, 0.18), 0 4px 8px -4px rgba(15, 31, 77, 0.08);
  --shadow-lg: 0 24px 48px -16px rgba(15, 31, 77, 0.24), 0 12px 24px -12px rgba(15, 31, 77, 0.12);
  --shadow-glow: 0 12px 36px -10px rgba(46, 95, 230, 0.4);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 140ms;
  --t-base: 240ms;
  --t-slow: 480ms;

  /* Z-index */
  --z-header: 60;
  --z-overlay: 80;
  --z-modal: 90;
}