/* ==========================================================================
   Tillii Design Tokens
   Source of truth for colour, type, space, radius, shadow and motion.
   Colours are sampled directly from supplied Tillii brand assets
   (logo lockup + LinkedIn banner). Do not hand-guess new brand colours —
   extend this file instead.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Colour — brand
     --------------------------------------------------------------------- */
  --color-orange-500: #EF650D;   /* brand orange — logo, large graphics, big CTAs */
  --color-orange-600: #C4530B;   /* text/link-safe orange, 4.5:1 on white */
  --color-orange-400: #F4884A;
  --color-orange-100: #FDEBE0;

  --color-green-500: #0EE156;    /* brand green — logo tick/bubble, graphics, badges */
  --color-green-700: #098934;    /* text/icon-safe green, 4.5:1 on white */
  --color-green-300: #7CF0A8;
  --color-green-100: #E4FBEC;

  /* Deep navy / near-black — premium technology sections, sampled from
     the Tillii R&D / investor banner background */
  --color-navy-950: #120D33;
  --color-navy-900: #1B1440;
  --color-navy-800: #261C5B;
  --color-navy-700: #332577;
  --color-violet-400: #8775D4;   /* sparing gradient accent, from banner */
  --color-violet-300: #A79BE0;

  /* ---------------------------------------------------------------------
     Colour — neutrals
     --------------------------------------------------------------------- */
  --color-white: #FFFFFF;
  --color-ink-950: #0B0C10;
  --color-ink-900: #14161C;
  --color-ink-700: #3A3E4A;
  --color-ink-500: #656B7A;
  --color-ink-300: #9AA0AF;
  --color-ink-200: #C4C8D2;
  --color-ink-100: #E4E6EC;
  --color-ink-50:  #F4F5F8;

  /* ---------------------------------------------------------------------
     Semantic colour roles
     --------------------------------------------------------------------- */
  --color-bg: var(--color-white);
  --color-bg-subtle: var(--color-ink-50);
  --color-bg-dark: var(--color-navy-900);
  --color-bg-dark-alt: var(--color-navy-950);
  --color-text: var(--color-ink-900);
  --color-text-muted: var(--color-ink-500);
  --color-text-on-dark: #FFFFFF;
  --color-text-on-dark-muted: #B9BBD8;
  --color-border: var(--color-ink-100);
  --color-border-on-dark: rgba(255, 255, 255, 0.14);

  --color-accent: var(--color-orange-500);
  --color-accent-text: var(--color-orange-600);
  --color-signal: var(--color-green-500);
  --color-signal-text: var(--color-green-700);

  --color-focus-ring: #1454E8;

  /* Gradient for premium/dark sections — restrained, referencing existing
     R&D materials. Used sparingly per brand direction. */
  --gradient-navy: linear-gradient(135deg, var(--color-navy-950) 0%, var(--color-navy-800) 52%, var(--color-navy-700) 100%);
  --gradient-signal: linear-gradient(135deg, var(--color-green-500) 0%, var(--color-orange-500) 100%);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-2xs: clamp(0.72rem, 0.70rem + 0.08vw, 0.78rem);
  --fs-xs:  clamp(0.8rem, 0.78rem + 0.1vw, 0.875rem);
  --fs-sm:  clamp(0.9rem, 0.87rem + 0.14vw, 1rem);
  --fs-base: clamp(1rem, 0.97rem + 0.16vw, 1.125rem);
  --fs-md:  clamp(1.125rem, 1.08rem + 0.22vw, 1.3rem);
  --fs-lg:  clamp(1.3rem, 1.22rem + 0.4vw, 1.6rem);
  --fs-xl:  clamp(1.6rem, 1.45rem + 0.75vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.7rem + 1.5vw, 2.9rem);
  --fs-3xl: clamp(2.5rem, 2rem + 2.5vw, 3.8rem);
  --fs-4xl: clamp(3rem, 2.2rem + 4vw, 5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  /* ---------------------------------------------------------------------
     Spacing — 4px base scale
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;

  --container-max: 1280px;
  --container-narrow: 860px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------------
     Radius & shadow
     --------------------------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11, 12, 16, 0.06), 0 1px 1px rgba(11, 12, 16, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 12, 16, 0.08), 0 2px 6px rgba(11, 12, 16, 0.05);
  --shadow-lg: 0 24px 64px rgba(11, 12, 16, 0.14), 0 8px 20px rgba(11, 12, 16, 0.07);
  --shadow-glow-green: 0 0 0 1px rgba(14, 225, 86, 0.25), 0 12px 32px rgba(14, 225, 86, 0.14);
  --shadow-glow-orange: 0 0 0 1px rgba(239, 101, 13, 0.22), 0 12px 32px rgba(239, 101, 13, 0.12);

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 480ms;
  --duration-loop: 6000ms;

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --header-height: 76px;
  --header-height-condensed: 60px;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
}

@media (prefers-color-scheme: dark) {
  /* Reserved for future dark-mode theming; the public marketing site
     currently ships a single light theme with dedicated dark *sections*
     rather than a full dark mode. */
}