/* ============================================================
   ICE Design System — Design Tokens
   Virtually Clear (Pty) Ltd · single source of truth
   ------------------------------------------------------------
   Plain CSS custom properties. Import this file first, then
   components.css. Every value below is referenced by name —
   never hard-code a hex, size, or radius in product code;
   reach for the token.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     1. BRAND COLOR — navy scale
     The navy ramp. 800 is the canonical brand ground (logo,
     hero, primary buttons). 900 is the deepest page ground.
     --------------------------------------------------------- */
  --ice-navy-900: #0f1626;
  --ice-navy-850: #13203a;
  --ice-navy-800: #16233e; /* canonical brand navy */
  --ice-navy-700: #1e2e4d;
  --ice-navy-600: #27395c;
  --ice-navy-500: #33486e;
  --ice-navy-400: #5a6e92;

  /* ---------------------------------------------------------
     2. BRAND COLOR — lime (the "clear" accent)
     The through-line to the parent brand. Use sparingly:
     primary CTA fill, focus, key links, the resolved beam.
     --------------------------------------------------------- */
  --ice-lime: #a6ce42;
  --ice-lime-600: #93b837; /* pressed / hover-darken */
  --ice-lime-300: #c7e07e; /* tints, subtle fills */
  --ice-lime-tint: #eef5dc; /* lime wash on light grounds */

  /* ---------------------------------------------------------
     3. SPECTRUM — refraction beams (LOGO USE ONLY)
     Ordered top→bottom as they enter the prism. Do NOT use
     these as UI accents; they belong to the mark.
     --------------------------------------------------------- */
  --ice-beam-red: #e2553f;
  --ice-beam-orange: #e9a53c;
  --ice-beam-lime: #a6ce42;
  --ice-beam-blue: #3e9be0;

  /* ---------------------------------------------------------
     4. NEUTRALS — warm-cool greys for light UI
     --------------------------------------------------------- */
  --ice-white: #ffffff;
  --ice-grey-50: #f4f6fb; /* lightest surface / app bg alt */
  --ice-grey-100: #eef2f8; /* page background */
  --ice-grey-200: #e6eaf2; /* hairlines, dividers */
  --ice-grey-300: #d9e0ec; /* input borders */
  --ice-grey-400: #b9c4d6; /* hover borders, disabled text */
  --ice-grey-500: #8a95ae; /* placeholder, subtle text */
  --ice-grey-600: #5c6b86; /* muted body text */

  /* ---------------------------------------------------------
     5. FEEDBACK
     --------------------------------------------------------- */
  --ice-danger: #d2483b;
  --ice-danger-bg: #fbecea;
  --ice-success: #2e8b57;
  --ice-warning: #d98a2b;

  /* ---------------------------------------------------------
     6. SEMANTIC — surfaces & text (light theme is the system)
     Product code should prefer these over raw scale tokens,
     so a future theme can be swapped at this layer.
     --------------------------------------------------------- */
  --ice-bg: var(--ice-grey-100);
  --ice-surface: var(--ice-white);
  --ice-surface-sunken: var(--ice-grey-50);
  --ice-border: var(--ice-grey-200);
  --ice-border-strong: var(--ice-grey-300);
  --ice-border-subtle: var(--ice-border); /* alias — reads as a distinct intent at call sites */

  --ice-text: var(--ice-navy-800); /* primary copy */
  --ice-text-muted: var(--ice-grey-600); /* secondary copy */
  --ice-text-subtle: var(--ice-grey-500); /* placeholder, meta */
  --ice-text-on-navy: var(--ice-grey-50); /* copy on navy ground */
  --ice-text-on-navy-muted: #9db0d2;

  /* ---------------------------------------------------------
     7. SEMANTIC — interactive roles
     --------------------------------------------------------- */
  --ice-primary: var(--ice-navy-800);
  --ice-primary-hover: var(--ice-navy-700);
  --ice-primary-text: var(--ice-white);

  --ice-accent: var(--ice-lime);
  --ice-accent-hover: var(--ice-lime-600);
  --ice-accent-text: var(--ice-navy-900); /* navy text on lime */

  --ice-link: var(--ice-navy-800);
  --ice-link-underline: var(--ice-lime);

  --ice-focus-ring: rgba(166, 206, 66, 0.45); /* lime @ 45% */
  --ice-focus-ring-danger: rgba(210, 72, 59, 0.18);

  /* form field tokens */
  --ice-field-bg: var(--ice-white);
  --ice-field-border: var(--ice-grey-300);
  --ice-field-border-hover: var(--ice-grey-400);
  --ice-field-border-focus: var(--ice-navy-800);

  /* ---------------------------------------------------------
     8. TYPOGRAPHY
     Two families. Grotesk for everything human; Mono for
     code, data, labels, and tracked caps.
     --------------------------------------------------------- */
  --ice-font-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ice-font-mono: "Space Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;

  /* weights */
  --ice-weight-regular: 400;
  --ice-weight-medium: 500;
  --ice-weight-semibold: 600;
  --ice-weight-bold: 700;

  /* type scale (px values; rem-friendly multiples of 1) */
  --ice-text-xs: 12px; /* meta, captions */
  --ice-text-sm: 13.5px; /* secondary UI text */
  --ice-text-base: 15px; /* body / inputs */
  --ice-text-md: 17px; /* lead paragraph */
  --ice-text-lg: 20px; /* h3 / card titles */
  --ice-text-xl: 27px; /* h2 / page titles */
  --ice-text-2xl: 34px; /* section heads */
  --ice-text-3xl: 44px; /* display */
  --ice-text-4xl: 64px; /* hero display */

  /* line-heights */
  --ice-leading-tight: 1.08;
  --ice-leading-snug: 1.3;
  --ice-leading-body: 1.55;

  /* letter-spacing */
  --ice-tracking-tight: -0.02em; /* large display */
  --ice-tracking-normal: 0;
  --ice-tracking-label: 0.16em; /* mono labels / tagline caps */

  /* ---------------------------------------------------------
     9. SPACING — 4px base unit
     --------------------------------------------------------- */
  --ice-space-1: 4px;
  --ice-space-2: 8px;
  --ice-space-3: 12px;
  --ice-space-4: 16px;
  --ice-space-5: 20px;
  --ice-space-6: 24px;
  --ice-space-8: 32px;
  --ice-space-10: 40px;
  --ice-space-12: 48px;
  --ice-space-16: 64px;
  --ice-space-20: 80px;
  --ice-space-24: 96px;

  /* ---------------------------------------------------------
     10. RADIUS
     --------------------------------------------------------- */
  --ice-radius-sm: 6px; /* chips, small controls */
  --ice-radius-md: 10px; /* inputs, buttons */
  --ice-radius-lg: 14px; /* cards */
  --ice-radius-xl: 18px; /* large panels */
  --ice-radius-pill: 999px;

  /* ---------------------------------------------------------
     11. ELEVATION
     Soft, cool-tinted shadows. Flat brand → use rarely.
     --------------------------------------------------------- */
  --ice-shadow-sm: 0 1px 2px rgba(15, 22, 38, 0.06);
  --ice-shadow-card: 0 4px 16px -6px rgba(15, 22, 38, 0.12);
  --ice-shadow-pop: 0 24px 60px -28px rgba(10, 18, 35, 0.55);

  /* ---------------------------------------------------------
     12. MOTION
     --------------------------------------------------------- */
  --ice-dur-fast: 120ms;
  --ice-dur-base: 150ms;
  --ice-dur-slow: 240ms;
  --ice-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ice-transition: all var(--ice-dur-fast) ease; /* default micro-interaction transition */

  /* ---------------------------------------------------------
     13. LAYOUT
     --------------------------------------------------------- */
  --ice-control-height: 48px; /* inputs */
  --ice-control-height-sm: 40px;
  --ice-button-height: 50px;
  --ice-focus-width: 4px;
  --ice-content-max: 1180px;
}