/* ==========================================================================
   Design Tokens
   Alcodex Technologies — Design System Foundation

   These custom properties are the single source of truth for color,
   type, spacing, and other visual primitives. Page and component CSS
   should always consume tokens rather than hard-coded values.
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------
     Color — primitives
     Primary matches the approved Alcodex logo. Red is the logo's
     signature colour; environmental green supports product contexts.
     -------------------------------------------------------------------- */

  /* Primary (brand indigo/violet) */
  --color-primary-50:  #f5f4fa;
  --color-primary-100: #eae8f4;
  --color-primary-200: #d3cfe7;
  --color-primary-300: #b7afd3;
  --color-primary-400: #978cc0;
  --color-primary-500: #7f73b6;
  --color-primary-600: #6960ab; /* approved logo violet */
  --color-primary-700: #554c91;
  --color-primary-800: #42396f;
  --color-primary-900: #302a4f;
  --color-brand-red:   #bd1f24; /* approved logo red */

  /* Environmental green (legacy teal token names retained for pages) */
  --color-teal-50:  #eef6f3;
  --color-teal-100: #d9ebe3;
  --color-teal-300: #a4c8b7;
  --color-teal-500: #579477;
  --color-teal-700: #32624e;

  /* Neutrals (anchored to brand ink #0f0f0f) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f2f2f3;
  --color-neutral-200: #e6e6e6;
  --color-neutral-300: #d1d1d3;
  --color-neutral-400: #a8a8ac;
  --color-neutral-500: #6b6b73;
  --color-neutral-600: #57575d;
  --color-neutral-700: #3a3a3f;
  --color-neutral-800: #232326;
  --color-neutral-900: #17171a;
  --color-neutral-950: #0f0f0f; /* brand ink */

  /* Feedback */
  --color-success-500: #2f9e52;
  --color-warning-500: #b8760b;
  --color-danger-500:  #d6402f;
  --color-info-500:    var(--color-primary-500);

  /* --------------------------------------------------------------------
     Color — semantic tokens
     Components and page CSS should reference these, not the primitives.
     -------------------------------------------------------------------- */

  --color-bg:            var(--color-neutral-0);
  --color-bg-subtle:     var(--color-neutral-50);
  --color-bg-muted:      var(--color-neutral-100);
  --color-bg-inverse:    var(--color-neutral-950);

  --color-text-primary:   var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-muted:     var(--color-neutral-500);
  --color-text-inverse:   var(--color-neutral-0);

  --color-border:        var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);

  --color-brand:         var(--color-primary-600);
  --color-brand-hover:   var(--color-primary-700);
  --color-brand-subtle:  var(--color-primary-50);

  --color-accent:        var(--color-primary-600);
  --color-accent-subtle: var(--color-primary-50);

  --color-link:          var(--color-brand);
  --color-link-hover:    var(--color-brand-hover);
  --color-focus-ring:    var(--color-primary-600);

  --color-success: var(--color-success-500);
  --color-warning: var(--color-warning-500);
  --color-danger:  var(--color-danger-500);
  --color-info:    var(--color-info-500);

  /* --------------------------------------------------------------------
     Typography
     -------------------------------------------------------------------- */

  /* 'Inter' is listed first so a webfont can be added later with no
     token changes; until then every browser falls through to the
     system stack below at zero extra network cost. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas,
    'Liberation Mono', Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   0.75rem;                                       /* 12px */
  --text-sm:   0.875rem;                                      /* 14px */
  --text-base: 1rem;                                          /* 16px */
  --text-lg:   1.125rem;                                      /* 18px */
  --text-xl:   clamp(1.25rem, 1.2rem + 0.25vw, 1.375rem);     /* 20–22px */
  --text-2xl:  clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);        /* 24–28px */
  --text-3xl:  clamp(1.875rem, 1.6rem + 1.25vw, 2.25rem);     /* 30–36px */
  --text-4xl:  clamp(2.25rem, 1.9rem + 1.75vw, 3rem);         /* 36–48px */
  --text-5xl:  clamp(2.75rem, 2.2rem + 2.75vw, 3.75rem);      /* 44–60px */
  --text-6xl:  clamp(3.25rem, 2.4rem + 4vw, 4.5rem);          /* 52–72px, display/hero */

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --leading-tight:   1.15; /* headings */
  --leading-snug:    1.3;
  --leading-normal:  1.6;  /* body copy */
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.02em; /* headings */
  --tracking-normal: 0;
  --tracking-wide:   0.02em;

  /* --------------------------------------------------------------------
     Spacing scale (4px base unit)
     -------------------------------------------------------------------- */

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

  /* Fluid section rhythm */
  --space-section-sm: clamp(3rem, 2.5rem + 2vw, 5rem);
  --space-section:    clamp(4rem, 3rem + 4vw, 8rem);

  /* --------------------------------------------------------------------
     Layout
     -------------------------------------------------------------------- */

  --container-max:        80rem; /* 1280px — standard content width */
  --container-max-narrow: 64rem; /* 1024px — text-heavy content (articles, forms) */
  --container-padding:    clamp(1.25rem, 1rem + 2vw, 3rem);

  /* --------------------------------------------------------------------
     Border radius
     -------------------------------------------------------------------- */

  --radius-sm:   0.25rem; /* 4px */
  --radius-md:   0.5rem;  /* 8px */
  --radius-lg:   0.75rem; /* 12px */
  --radius-xl:   1rem;    /* 16px */
  --radius-full: 999px;

  /* --------------------------------------------------------------------
     Shadows — restrained, single-layer elevation only
     -------------------------------------------------------------------- */

  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 15, 15, 0.08);
  --shadow-lg: 0 18px 44px rgba(15, 15, 15, 0.12);

  /* --------------------------------------------------------------------
     Transitions
     -------------------------------------------------------------------- */

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-fast: 150ms var(--ease-standard);
  --transition-base: 200ms var(--ease-standard);
  --transition-slow: 350ms var(--ease-standard);

  /* --------------------------------------------------------------------
     Z-index scale
     -------------------------------------------------------------------- */

  --z-base:            0;
  --z-dropdown:      100;
  --z-sticky:        200;
  --z-fixed:         300;
  --z-overlay:       400;
  --z-modal:         500;
  --z-toast:         600;
  --z-max:           999;
}