/* ============================================================================
   tokens.css - the whole design system in one file.
   Copy into the project, then fill the four blocks marked FROM DIRECTION
   with the values from the chosen directions/*.md file. Change nothing else.
   ============================================================================ */

:root {
  /* ---- FROM DIRECTION: colour -------------------------------------------
     Every colour on the site comes from here. If a hex appears anywhere else
     in the project, the system has already broken. */
  --bg:            #ffffff;   /* page ground */
  --surface:       #f5f5f4;   /* raised panel */
  --surface-2:     #e7e5e4;   /* second step, borders-by-contrast */
  --ink:           #1c1917;   /* primary text */
  --ink-soft:      #57534e;   /* secondary text - never lighter than this */
  --accent:        #1c1917;   /* the one colour that means "act" */
  --accent-ink:    #ffffff;   /* text on accent */
  --accent-soft:   #f5f5f4;   /* accent at low intensity */

  /* ---- FROM DIRECTION: type --------------------------------------------- */
  --font-display:  Georgia, "Times New Roman", serif;
  --font-body:     system-ui, -apple-system, sans-serif;
  --tracking-display: -0.02em;
  --weight-display: 600;

  /* ---- FROM DIRECTION: shape -------------------------------------------- */
  --radius-sm:     4px;    /* inputs, small controls */
  --radius-md:     10px;   /* panels */
  --radius-lg:     24px;   /* rare featured surfaces */
  --border:        1px solid color-mix(in oklab, var(--ink) 12%, transparent);

  /* ---- FROM DIRECTION: motion ------------------------------------------- */
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:      160ms;
  --dur:           280ms;
  --dur-slow:      600ms;

  /* ---- FIXED: do not edit per project ----------------------------------- */

  /* Type scale. Fluid, so there is no tablet dead zone and no mobile
     overflow. min is the 390px value, max is the 1440px value. */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.25rem + 0.95vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.40rem + 1.65vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.55rem + 2.60vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.65rem + 4.20vw, 4.74rem);

  /* Spacing. One scale, used everywhere. */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;     --space-9: 6rem;
  --space-10: 8rem;

  /* Section rhythm. Deliberately two values, not one: alternating them is
     what stops every section feeling identically tall. */
  --section-y:       clamp(var(--space-8), 10vw, var(--space-10));
  --section-y-tight: clamp(var(--space-7), 6vw, var(--space-8));

  --measure: 65ch;            /* readable line length */
  --container: 1200px;
  --gutter: clamp(1rem, 5vw, 4rem);

  /* Seam system - see blocks/seams.css */
  --seam-h: 100px;
  --seam-h-sm: 44px;
  --panel-bleed: 6vw;

  /* Elevation. Tinted with the ink colour, never pure black, or panels look
     like they are floating on a different site. */
  --shadow-1: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent);
  --shadow-2: 0 4px 16px color-mix(in oklab, var(--ink) 10%, transparent);
  --shadow-3: 0 18px 48px color-mix(in oklab, var(--ink) 14%, transparent);

  --z-header: 100;
  --z-seam: 2;
  --z-overlap: 4;
  --z-float: 200;
  --z-menu: 300;   /* full-screen mobile menu sits above floats */
}

/* Dark direction? Set these on :root instead of the light values above.
   Do not define a colour only inside a media query - a viewer with no
   preference then gets an undefined token. */