/* Sofos Robotics — CSS Design Tokens */

:root {
  /* --- Color System --- */
  --color-navy:           #0f2d52;
  --color-navy-mid:       #1a5298;
  --color-navy-dark:      #0d1b2e;
  --color-green:          #1a8c30;
  --color-green-dark:     #147526;
  --color-cta:            #1a8c30;
  --color-cta-hover:      #147526;
  --color-bg:             #f5f8fa;
  --color-surface:        #ffffff;
  --color-text-body:      #475569;
  --color-text-secondary: #64748b;
  --color-border:         #dde4ee;

  /* --- Typography --- */
  --font-heading: 'Sora', sans-serif;
  --font-primary: 'Inter', system-ui, sans-serif;

  /* Font sizes — fluid */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --text-3xl:  clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --text-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --text-5xl:  clamp(3rem, 2rem + 5vw, 5.5rem);
  --text-hero: clamp(3.5rem, 2.5rem + 6vw, 7rem);

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

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  /* --- Spacing --- */
  --space-xs:      0.25rem;
  --space-sm:      0.5rem;
  --space-md:      1rem;
  --space-lg:      1.5rem;
  --space-xl:      2rem;
  --space-2xl:     3rem;
  --space-3xl:     4rem;
  --space-4xl:     6rem;
  --space-5xl:     8rem;
  --space-section: clamp(4rem, 8vw, 10rem);

  /* --- Layout --- */
  --container-max:    1400px;
  --container-narrow: 900px;
  --nav-height:       100px;

  /* --- Borders --- */
  --border-width:       1px;
  --border-radius-sm:   4px;
  --border-radius-md:   8px;
  --border-radius-lg:   16px;
  --border-radius-card: 10px;
  --border-radius-full: 9999px;

  /* --- Shadows (navy-tinted, layered) --- */
  --shadow-card:
    0 2px 12px rgba(15, 45, 82, 0.10),
    0 1px 3px rgba(15, 45, 82, 0.06);
  --shadow-card-hover:
    0 8px 32px rgba(15, 45, 82, 0.14),
    0 2px 8px rgba(15, 45, 82, 0.08);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   300ms ease;
  --transition-slow:   500ms ease;
  --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-index layers --- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    1000;
  --z-modal:    1050;

  /* --- Legacy token aliases (compat) ---
     The Navy+Green rebuild renamed the token set, but ~360 var() usages in
     styles.css / components.css / embedded page styles still reference the old
     names, which resolved to `unset` (symptom: invisible CTA buttons, wrong
     borders). Aliases restore them. Migrate usages to the new tokens
     opportunistically, then delete this block. */
  --primary:        var(--color-navy);
  --primary-dark:   var(--color-navy-dark);
  --primary-faint:  rgba(15, 45, 82, 0.1);
  --primary-ghost:  rgba(15, 45, 82, 0.05);
  --accent:         var(--color-cta);       /* was Robotmaster red #E63312 — green per no-red rule */
  --accent-light:   var(--color-cta-hover);
  --white:          var(--color-surface);
  --white-dim:      rgba(255, 255, 255, 0.72);
  --black:          #000000;
  --dark:           #171717;
  --gray-100:       #E8E8E8;
  --gray-200:       #D1D1D1;
  --text-primary:   #171717;
  --text-dark:      #171717;
  --text-secondary: var(--color-text-body);
  --text-muted:     var(--color-text-secondary);
  --text-light:     #A0A0A0;
  --text-md:        var(--text-base);
  --bg-secondary:   var(--color-bg);
  --bg-tertiary:    var(--color-bg);
  --border-color:   var(--color-border);
  --border-hover:   #D1D1D1;
  --shadow-md:      0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg:      0 10px 25px rgba(0, 0, 0, 0.1);
  --shadow-xl:      0 20px 50px rgba(0, 0, 0, 0.15);
}

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