/* ==========================================================================
   CAPTURED BY CHAKRAS — Design tokens
   Single source of truth for colour, type, space, motion.
   Change values here, never in the page CSS.
   ========================================================================== */

:root {
  /* ---- Colour --------------------------------------------------------- */
  /* True black. Not charcoal, not #111 — the depth is the whole point. */
  --black:        #000000;
  --raised:       #0B0B0C;   /* form fields, cards — barely lifted */
  --raised-2:     #131315;   /* hover state on raised surfaces */

  /* Contrast ratios below are measured against pure black, not estimated. */
  --bone:         #F4F1EA;                    /* 18.6:1 — headlines */
  --bone-dim:     rgba(244, 241, 234, 0.62);  /*  7.1:1 — body copy, AA */
  --bone-faint:   rgba(244, 241, 234, 0.52);  /*  5.1:1 — small labels, AA */
  /* Decorative HUD text only. Below AA on purpose — it is aria-hidden
     atmosphere and never carries information. Do not use it for content. */
  --bone-ghost:   rgba(244, 241, 234, 0.30);

  --gold:         #C9B27F;                    /* 10.2:1 — labels, links */
  --gold-bright:  #E3D2A8;                    /* hover / phosphor bloom */
  --gold-dim:     rgba(201, 178, 127, 0.50);  /*  3.1:1 — control borders */
  --gold-ghost:   rgba(201, 178, 127, 0.12);  /* dividers, arcs (decorative) */

  /* MICRO ONLY. Never paint more than ~8px of this anywhere on screen. */
  --signal:       #E5342A;

  /* ---- Type ----------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:    'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif:   'Cormorant Garamond', 'Times New Roman', Times, serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Display — heavy, tight, uppercase. Does the emotional work. */
  --fs-display:   clamp(2.75rem, 8vw, 8rem);
  --fs-h1:        clamp(2.25rem, 6vw, 5.5rem);
  --fs-h2:        clamp(1.75rem, 4vw, 3.5rem);
  --fs-h3:        clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:      clamp(0.95rem, 1.05vw, 1.0625rem);
  --fs-lead:      clamp(1.0625rem, 1.4vw, 1.375rem);
  --fs-mono:      0.6875rem;    /* 11px */
  --fs-mono-lg:   0.8125rem;    /* 13px */

  --lh-display:   0.92;
  --lh-heading:   1.02;
  --lh-body:      1.7;

  --ls-display:   -0.025em;
  --ls-mono:      0.14em;
  --ls-logo:      0.32em;   /* the serif wordmark — scarcity makes it expensive */
  --ls-label:     0.2em;

  /* ---- Space ---------------------------------------------------------- */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-24:  6rem;
  --sp-32:  8rem;
  --sp-48:  12rem;

  /* Negative space IS the design. Sections breathe or the luxury dies. */
  --section-y:    clamp(6rem, 16vh, 14rem);
  --gutter:       clamp(1.25rem, 5vw, 5rem);
  --measure:      62ch;

  /* ---- Motion --------------------------------------------------------- */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     320ms;
  --dur:          620ms;
  --dur-slow:     1100ms;

  /* ---- Structure ------------------------------------------------------ */
  --hairline:     1px;
  --max-w:        1680px;
  --z-grain:      9000;
  --z-nav:        8500;
  --z-lightbox:   9500;

  /* ---- Feature switches ----------------------------------------------- */
  /* Portfolio grid desaturation. Set to `none` to show all work in colour. */
  --grid-filter:  grayscale(1) contrast(1.06) brightness(0.94);
  --grid-filter-hover: grayscale(0) contrast(1) brightness(1);
}

/* Touch devices have no hover, so the colour reveal never fires and the work
   would read as if it were all shot in black and white. Show it in colour. */
@media (hover: none) {
  :root {
    --grid-filter: none;
    --grid-filter-hover: none;
  }
}

/* Honour the OS setting. Everything animated is guarded on this. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur:      1ms;
    --dur-slow: 1ms;
  }
}