/* ==========================================================================
   tokens.css — Novabridge 2026 Design Tokens
   Source: CLAUDE.md brand spec + Mood Board analysis
   ========================================================================== */

:root {

  /* ===================== BRAND COLOURS ===================== */
  /* Purple Palette (Primary) — 5 weights, light to dark */
  --color-purple-1: #9C85BE;
  --color-purple-2: #7058A5;
  --color-purple-3: #573F98;
  --color-purple-4: #42297B;
  --color-purple-5: #270A4A;

  /* Blue Palette — 5 weights, light to dark */
  --color-blue-1: #91C5EA;
  --color-blue-2: #4A8ECB;
  --color-blue-3: #2F69B2;
  --color-blue-4: #005290;
  --color-blue-5: #00274C;

  /* Teal Palette (Accent) — 5 weights, light to dark */
  --color-teal-1: #7ACCC7;
  --color-teal-2: #00ADA8;
  --color-teal-3: #009297;
  --color-teal-4: #00757B;
  --color-teal-5: #004B52;

  /* ===================== SEMANTIC ROLES ===================== */
  /* Primary — mapped to Purple */
  --color-primary:          var(--color-purple-3);
  --color-primary-light:    var(--color-purple-1);
  --color-primary-mid:      var(--color-purple-2);
  --color-primary-dark:     var(--color-purple-5);

  /* Accent — mapped to Teal */
  --color-accent:           var(--color-teal-2);
  --color-accent-dark:      var(--color-teal-4);

  /* CTA — mapped to Teal */
  --color-cta:              var(--color-teal-3);
  --color-cta-hover:        var(--color-teal-4);

  /* Surfaces */
  --color-surface-dark:     var(--color-purple-5);
  --color-surface-mid:      var(--color-purple-4);
  --color-surface-light:    #F5F5F7; /* Very light neutral grey — safe bg for all text colours */

  /* Text */
  --color-text-on-dark:     #FFFFFF;
  --color-text-heading:     #0F0F0F;
  --color-text-body:        #1A1A1A;
  --color-text-muted:       #6B6B6B;
  --color-text-inverse:     #FFFFFF;

  /* Borders */
  --color-border:           #E4E4E4;
  --color-border-brand:     var(--color-purple-2);

  /* Absolutes */
  --color-white:            #FFFFFF;
  --color-black:            #0F0F0F;

  /* ===================== TYPOGRAPHY ===================== */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font weights */
  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Font sizes */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.25rem;    /* 20px */
  --fs-2xl:  1.5rem;     /* 24px */
  --fs-3xl:  1.875rem;   /* 30px */
  --fs-4xl:  2.25rem;    /* 36px */
  --fs-5xl:  3rem;       /* 48px */
  --fs-6xl:  3.75rem;    /* 60px */
  --fs-7xl:  4.5rem;     /* 72px */

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-normal:  0em;
  --ls-wide:    0.08em;
  --ls-wider:   0.15em;

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

  /* ===================== LAYOUT ===================== */
  --container-max:    1280px;
  --container-default: 1280px;
  --container-wide:   1440px;
  --container-narrow: 800px;
  --container-pad:    1.5rem;
  --section-pad-y:    var(--sp-20);
  --section-pad-y-sm: var(--sp-12);
  --section-pad-y-lg: var(--sp-32);

  /* ===================== SHAPE ===================== */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ===================== SHADOW ===================== */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);

  /* ===================== ANIMATION ===================== */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;
}