/* ============================================================
   TOKENS.CSS — Le Clue Portfolio Design System
   Single source of truth for all design values.
   Never use raw values in other files — always reference
   a token from this file.
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOUR — Dark Surfaces
     Used on: Landing, Portfolio, Demo pages, Nav
  ---------------------------------------------------------- */
  --dark-base:      #0F1117;
  --dark-surface:   #171B26;
  --dark-card:      #1E2433;
  --dark-border:    #2A3044;

  /* ----------------------------------------------------------
     COLOUR — Light Surfaces
     Used on: About, CV, Q&A, Contact pages
  ---------------------------------------------------------- */
  --light-base:     #F5F6FA;
  --light-surface:  #FFFFFF;
  --light-card:     #ECEEF5;
  --light-border:   #D8DCE8;

  /* ----------------------------------------------------------
     COLOUR — Teal (Primary Accent)
     Navigation, CTAs, links, positive deltas, data labels
  ---------------------------------------------------------- */
  --teal-400:       #2DD4BF;
  --teal-500:       #14B8A6;
  --teal-600:       #0D9488;
  --teal-glow:      rgba(45, 212, 191, 0.12);
  --teal-border:    rgba(45, 212, 191, 0.25);

  /* ----------------------------------------------------------
     COLOUR — Rust (Secondary Accent)
     Alerts, highlights, negative deltas, featured tags
  ---------------------------------------------------------- */
  --rust-400:       #FB923C;
  --rust-500:       #F97316;
  --rust-600:       #EA6C0A;
  --rust-glow:      rgba(249, 115, 22, 0.12);
  --rust-border:    rgba(249, 115, 22, 0.25);

  /* ----------------------------------------------------------
     COLOUR — Text (Dark Mode)
  ---------------------------------------------------------- */
  --text-dark-primary:    #F0F2F8;
  --text-dark-secondary:  #8B93A8;
  --text-dark-muted:      #555E75;

  /* ----------------------------------------------------------
     COLOUR — Text (Light Mode)
  ---------------------------------------------------------- */
  --text-light-primary:   #0F1117;
  --text-light-secondary: #4A5270;
  --text-light-muted:     #9BA3BB;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Fonts
  ---------------------------------------------------------- */
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Plus Jakarta Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Scale
  ---------------------------------------------------------- */
  --text-xs:    0.75rem;    /* 12px — mono labels, tags */
  --text-sm:    0.875rem;   /* 14px — secondary body, captions */
  --text-base:  1rem;       /* 16px — primary body */
  --text-lg:    1.125rem;   /* 18px — large body, nav links */
  --text-xl:    1.25rem;    /* 20px — small headings */
  --text-2xl:   1.5rem;     /* 24px — section headings */
  --text-3xl:   1.875rem;   /* 30px — page headings */
  --text-4xl:   2.25rem;    /* 36px — large headings */
  --text-5xl:   3rem;       /* 48px — hero headings */
  --text-6xl:   3.75rem;    /* 60px — display */

  /* ----------------------------------------------------------
     TYPOGRAPHY — Weights
  ---------------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Line Heights
  ---------------------------------------------------------- */
  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;
  --leading-loose:  1.8;

  /* ----------------------------------------------------------
     TYPOGRAPHY — Letter Spacing
  ---------------------------------------------------------- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ----------------------------------------------------------
     SPACING — 8-point base grid
  ---------------------------------------------------------- */
  --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-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --nav-height:       64px;   /* Full nav height */
  --nav-height-slim:  48px;   /* Slim nav on scroll */
  --content-max:      1200px; /* Max content width */
  --content-padding:  var(--space-8); /* Side padding on pages */

  /* ----------------------------------------------------------
     BORDER RADIUS
  ---------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     TRANSITIONS
  ---------------------------------------------------------- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s ease;
  --transition-slow:   0.35s ease;

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

}