/* Design Tokens 
This file defines the entire visual language of the site.
Every othee CSS file references these variables.
Never hardcode colors, size or fonts anywhere else.
*/

:root {
  /* BRAND COLORS */
  --color-brand: #1e2761;
  --color-brand-deep: #151d4a;
  --color-brand-light: #e8eaf2;
  --color-brand-muted: #6470a8;

  --color-gold: #b89a6a;
  --color-gold-light: #f0e6d4;

  /* BACKGROUNDS */
  --color-bg: #ffffff;
  --color-bg-soft: #f8f8f6;
  --color-bg-subtle: #f2f1ef;
  --color-bg-inverse: #0e1236;

  /* TEXT */
  --color-text-primary: #111111;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary: #aaaaaa;
  --color-text-inverse: #ffffff;

  /* BORDERS */
  --color-border: rgba(17, 17, 17, 0.1);
  --color-border-subtle: rgba(17, 17, 17, 0.06);
  --color-border-strong: rgba(17, 17, 17, 0.2);

  /* TYPOGRAPHY */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-label: "DM Sans", system-ui, sans-serif;

  /* TYPE SCALE */
  --text-xs: 0.6875rem; /* 11px */
  --text-sm: 0.75rem; /* 12px */
  --text-base: 0.875rem; /* 14px */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.375rem; /* 22px */
  --text-2xl: 1.75rem; /* 28px */
  --text-3xl: 2.25rem; /* 36px */
  --text-4xl: 3rem; /* 48px */
  --text-5xl: 4rem; /* 64px */
  --text-6xl: 5.5rem; /* 88px */

  /* LINE HEIGHT */
  --leading-tight: 1.1; /* headings */
  --leading-snug: 1.25; /* subheadings */
  --leading-normal: 1.55; /* default */
  --leading-loose: 1.8; /* body copy, easier to read */

  /* LETTER SPACING */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.18em; /*used on uppercase labeles */

  /* SPACING SCALE 
    So, based on a 4px grid. Every space is a multiple of 4.
    --space-1 = 4px, --space-2 = 8px, --space-4 = 16px etc.
     */
  --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 */
  --space-40: 10rem; /* 160px */

  /* LAYOUT */
  --container-max: 1320px; /*max width of content area */
  --container-nnarrow: 760px; /*for articles and narrow content */
  --gutter: clamp(1rem, 5vw, 2rem); /*responsive side padding */

  /* BORDER RADIUS */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px; /* fully rounded, used on tags and buttons */

  /* SHADOWS */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.12);

  /* TRANSITIONS 
    cubic-bezier controls the acceleration curve of animations.
    ease-expo feels snappy and premium — fast start, smooth end.*/
  --ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;

  /* Z-INDEX SCALE 
    Controls what sits on top of what.
    Higher number = closer to the user.*/
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10; /* sticky filter bars */
  --z-overlay: 100; /* dropdowns */
  --z-modal: 200; /* lightboxes */
  --z-nav: 300; /* navbar - always on top */
  --z-toast: 400; /* notifications */
}