/* =============================================================
   ADDA Website v1 -- Design Tokens
   Project: ADDA Website v1 (sandbox)
   File: css/tokens.css
   Purpose: Single source of truth for all brand colours,
            typography, spacing, and visual values.
            No colour, font size, or spacing value should be
            hard-coded anywhere else. Everything must reference
            a token from this file.
   Status: Sandbox only. Do not deploy to production.
   ============================================================= */

:root {

  /* --- Colours --- */

  /* Brand blues */
  --color-blue-deep:        #1B3A6B;   /* Primary brand blue -- headers, nav, key UI */
  --color-blue-mid:         #2E5FA3;   /* Secondary blue -- links, accents */
  --color-blue-light:       #D5E8F0;   /* Light blue -- table headers, highlights */
  --color-blue-navy:        #0F2340;   /* Rich dark navy -- CTA section, confident gestures */

  /* Neutrals */
  --color-white:            #FFFFFF;
  --color-off-white:        #F7F8FA;   /* Page background, section alternates */
  --color-neutral-100:      #F0F2F5;   /* Card backgrounds, subtle fills */
  --color-neutral-200:      #E2E6ED;   /* Borders, dividers */
  --color-neutral-400:      #9AA3B0;   /* Decorative only -- do not use for text on light backgrounds */
  --color-neutral-700:      #3D4452;   /* Body text */
  --color-neutral-900:      #1A1D23;   /* Headings, high-contrast text */

  /* Accent -- logo only, not for general UI use */
  --color-orange-accent:    #E8630A;

  /* Semantic colours */
  --color-text-primary:     var(--color-neutral-900);
  --color-text-body:        var(--color-neutral-700);
  --color-text-muted:       #5A6473;   /* Muted text -- passes WCAG AA on white, off-white, and soft blue backgrounds */
  --color-text-inverse:     var(--color-white);
  --color-bg-page:          var(--color-white);
  --color-bg-subtle:        var(--color-off-white);
  --color-border:           var(--color-neutral-200);
  --color-link:             var(--color-blue-mid);
  --color-link-hover:       var(--color-blue-deep);
  --color-focus-ring:       var(--color-blue-mid);

  /* --- Typography --- */

  --font-family-base:       "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-family-heading:    "Lora", Georgia, "Times New Roman", serif;

  /* Type scale */
  --font-size-xs:           0.75rem;    /* 12px */
  --font-size-sm:           0.875rem;   /* 14px */
  --font-size-base:         1rem;       /* 16px */
  --font-size-md:           1.125rem;   /* 18px */
  --font-size-lg:           1.25rem;    /* 20px */
  --font-size-xl:           1.5rem;     /* 24px */
  --font-size-2xl:          1.875rem;   /* 30px */
  --font-size-3xl:          2.25rem;    /* 36px */
  --font-size-4xl:          3rem;       /* 48px */

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

  /* Line heights */
  --line-height-tight:      1.2;
  --line-height-snug:       1.4;
  --line-height-base:       1.6;
  --line-height-loose:      1.8;

  /* --- Spacing scale --- */

  --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 */

  /* --- Layout --- */

  --container-max:          1160px;
  --container-padding:      var(--space-6);

  /* --- Borders --- */

  --border-radius-sm:       0.25rem;
  --border-radius-md:       0.5rem;
  --border-radius-lg:       1rem;
  --border-radius-pill:     9999px;
  --border-width:           1px;
  --border-color:           var(--color-border);

  /* --- Shadows --- */

  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);

  /* --- Focus ring --- */

  --focus-ring-width:       3px;
  --focus-ring-offset:      2px;
  --focus-ring-color:       var(--color-focus-ring);

  /* --- Transitions --- */

  --transition-fast:        150ms ease;
  --transition-base:        250ms ease;
  --transition-slow:        400ms ease;

  /* --- Navigation --- */

  --nav-height:             64px;
  --nav-bg:                 var(--color-blue-deep);
  --nav-text:               var(--color-white);
  --nav-link-hover-bg:      rgba(255, 255, 255, 0.12);
}