/* ==========================================================================
   AKSO — Design Tokens
   Single source of truth for colour, type, spacing, motion and layout.
   Every other stylesheet should consume these custom properties rather
   than hard-coding values, so the entire visual system can be re-tuned
   from this one file.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     Colour — dark mode only. Off-black / off-white, no accent hue.
     Hierarchy is carried by contrast, scale and spacing, not colour.
     --------------------------------------------------------------------- */
  --color-bg:              #0a0a0a;
  --color-bg-elevated:     #121212;
  --color-bg-elevated-2:   #1a1a1a;

  --color-text-primary:    #f5f5f3;
  --color-text-secondary:  #a8a8a5;
  --color-text-muted:      #84847f;

  --color-border:          #232323;
  --color-border-hover:    #3a3a3a;

  --color-overlay:         rgba(10, 10, 10, 0.72);
  --color-overlay-light:   rgba(10, 10, 10, 0.4);
  --color-scrim-bottom:    linear-gradient(to top, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0) 45%);

  --color-inverse-bg:      #f5f5f3;
  --color-inverse-text:    #0a0a0a;

  --color-focus:           #f5f5f3;
  --color-error:           #d97a6c;

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-display: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-accent:  "Fraunces Variable", "Fraunces", Georgia, "Times New Roman", serif;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-hero:      clamp(3rem, 3vw + 5vw, 8rem);
  --text-h1:        clamp(2.5rem, 2vw + 3vw, 5.5rem);
  --text-h2:        clamp(2rem, 1.5vw + 2.5vw, 4rem);
  --text-h3:        clamp(1.25rem, 0.75vw + 1.5vw, 1.75rem);
  --text-lead:      clamp(1.05rem, 0.4vw + 1rem, 1.375rem);
  --text-body:       1rem;
  --text-caption:    0.8125rem;
  --text-nav:        0.875rem;

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-widest: 0.12em;

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

  /* ---------------------------------------------------------------------
     Spacing — 8px base unit
     --------------------------------------------------------------------- */
  --space-1: 0.5rem;    /* 8px  */
  --space-2: 1rem;      /* 16px */
  --space-3: 1.5rem;    /* 24px */
  --space-4: 2rem;      /* 32px */
  --space-5: 3rem;      /* 48px */
  --space-6: 4rem;      /* 64px */
  --space-7: 6rem;      /* 96px */
  --space-8: 8rem;      /* 128px */
  --space-9: 12rem;     /* 192px */

  /* Section rhythm — swaps at the tablet breakpoint via media query below */
  --section-padding-y: var(--space-7);
  --section-padding-x: var(--space-4);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container-max:      1600px;
  --container-narrow:   72ch;
  --grid-columns:       12;
  --grid-gutter:        var(--space-4);

  --header-height:      88px;
  --header-height-scrolled: 72px;

  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   0.25s;
  --duration-base:   0.5s;
  --duration-slow:   0.9s;
  --duration-hero:   1.6s;

  /* ---------------------------------------------------------------------
     Z-index scale
     --------------------------------------------------------------------- */
  --z-base:        1;
  --z-nav:         500;
  --z-overlay:     600;
  --z-menu:        700;
  --z-lightbox:    800;
  --z-cursor:      900;
  --z-transition:  1000;
}

/* Tablet and below: tighten section rhythm and gutters */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: var(--space-6);
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--space-6);
    --section-padding-x: var(--space-3);
    --grid-gutter: var(--space-3);
    --header-height: 72px;
    --header-height-scrolled: 64px;
  }
}