/* ============================================================
   GLOSSOLALIE ADVISORY — Design Tokens
   Source of truth for all visual identity values
   Version 1.0 · glossolalie.pro
   ============================================================ */

:root {
  /* === COLOUR PALETTE === */
  --teal-signal:   #0D9488;
  --teal-light:    #CCFBF1;
  --teal-dark:     #065F52;
  --navy-profond:  #1E3A5F;
  --navy-mid:      #2D5180;
  --navy-dark:     #152C47;
  --ivory:         #F8F7F4;
  --ivory-dark:    #EDEBE5;
  --white:         #FFFFFF;
  --black:         #1A1A1A;
  --grey-100:      #F5F4F1;
  --grey-200:      #E8E5DE;
  --grey-400:      #9C9C96;
  --grey-600:      #6B6B64;
  --grey-700:      #4A4A44;
  --error:         #B91C1C;
  --success:       #15803D;


  /* === SEMANTIC COLOUR ALIASES ===
     Used by error pages, legal pages, lang switcher, form components */
  --color-navy:        var(--navy-profond);
  --color-teal:        var(--teal-signal);
  --color-teal-dark:   var(--teal-dark);
  --color-ivory:       var(--ivory);
  --color-ivory-dark:  var(--ivory-dark);
  --color-white:       var(--white);
  --color-text:        var(--black);
  --color-text-muted:  var(--grey-600);
  --color-border:      var(--grey-200);

  /* === TYPOGRAPHY === */
  --font-display:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:     'Montserrat', Helvetica, Arial, sans-serif;

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

  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.15em;

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


  /* === NAMED SPACING ALIASES ===
     Used by error pages, legal pages, utility components
     Maps semantic names to the numbered spacing scale above */
  --space-xs:   var(--space-2);    /* 8px  */
  --space-sm:   var(--space-3);    /* 12px */
  --space-md:   var(--space-4);    /* 16px */
  --space-lg:   var(--space-6);    /* 24px */
  --space-xl:   var(--space-8);    /* 32px */
  --space-2xl:  var(--space-12);   /* 48px */
  --space-3xl:  var(--space-16);   /* 64px */

  /* === LAYOUT === */
  --container-max:     1200px;
  --container-narrow:  800px;
  --container-wide:    1400px;
  --gutter:            clamp(1.5rem, 5vw, 3rem);
  --nav-height:        72px;

  /* === BORDERS & RADII === */
  --radius-sm:   2px;
  --radius-base: 4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--grey-200);
  --border-mid:    1px solid var(--grey-400);
  --border-teal:   1px solid var(--teal-signal);

  /* === SHADOWS === */
  --shadow-sm:   0 1px 3px rgba(30, 58, 95, 0.08);
  --shadow-md:   0 4px 16px rgba(30, 58, 95, 0.12);
  --shadow-lg:   0 12px 40px rgba(30, 58, 95, 0.16);
  --shadow-xl:   0 24px 64px rgba(30, 58, 95, 0.20);

  /* === TRANSITIONS === */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* === Z-INDEX SCALE === */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* High-contrast mode overrides */
@media (prefers-contrast: high) {
  :root {
    --teal-signal:  #006B61;
    --teal-dark:    #004F47;
    --grey-400:     #767670;
    --grey-600:     #4A4A44;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast:  0ms;
    --transition-base:  0ms;
    --transition-slow:  0ms;
  }
}