/* AlMaha — design tokens
   Single source of truth for colour, type, space, motion.
   Mirrors the Tailwind inline config in head.ejs so utility classes
   and raw CSS stay in lockstep. */

:root {
  /* Palette — earth-stone (Nature Distilled) */
  --ink:    #0E0E0F;
  --sand:   #E9DFCF;
  --cream:  #D9C9A3;
  --rose:   #B86E55;
  --gold:   #A6843A;
  --marble: #F6F4EE;

  /* color-mix derived tints (with rgba siblings for the rare agent without color-mix) */
  --ink-72:    rgba(14,14,15,.72);
  --ink-56:    rgba(14,14,15,.56);
  --ink-32:    rgba(14,14,15,.32);
  --ink-16:    rgba(14,14,15,.16);
  --ink-08:    rgba(14,14,15,.08);
  --gold-12:   rgba(166,132,58,.12);
  --gold-24:   rgba(166,132,58,.24);
  --gold-48:   rgba(166,132,58,.48);
  --cream-40:  rgba(217,201,163,.40);
  --sand-60:   rgba(233,223,207,.60);
  --marble-72: rgba(246,244,238,.72);

  @supports (color: color-mix(in oklab, white, black)) {
    --ink-72:    color-mix(in oklab, var(--ink) 72%, transparent);
    --ink-56:    color-mix(in oklab, var(--ink) 56%, transparent);
    --ink-32:    color-mix(in oklab, var(--ink) 32%, transparent);
    --ink-16:    color-mix(in oklab, var(--ink) 16%, transparent);
    --ink-08:    color-mix(in oklab, var(--ink) 8%,  transparent);
    --gold-12:   color-mix(in oklab, var(--gold) 12%, transparent);
    --gold-24:   color-mix(in oklab, var(--gold) 24%, transparent);
    --gold-48:   color-mix(in oklab, var(--gold) 48%, transparent);
    --cream-40:  color-mix(in oklab, var(--cream) 40%, transparent);
    --sand-60:   color-mix(in oklab, var(--sand) 60%, transparent);
    --marble-72: color-mix(in oklab, var(--marble) 72%, transparent);
  }

  /* Type ramp — single family (The Year of The Camel Thin), expressive via size/weight/feature only */
  --type-display: clamp(2.6rem, 4.4vw + 1rem, 6.4rem);
  --type-h1:      clamp(2.0rem, 2.8vw + 1rem, 4.2rem);
  --type-h2:      clamp(1.5rem, 1.6vw + 1rem, 2.4rem);
  --type-h3:      clamp(1.15rem, 0.6vw + 1rem, 1.5rem);
  --type-body:    1.0625rem;
  --type-small:   0.875rem;
  --type-eyebrow: 0.72rem;
  --type-data:    0.92rem;

  /* Display + body — single family, Thin (100) by default, heavier weights for ranks */
  --font-display: "The Year of The Camel", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "The Year of The Camel", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  /* Data-table stack — tabular figures, lining nums, monospace for ASTM rows */
  --font-data:    "The Year of The Camel", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --weight-thin:    100;
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* Space — fluid where it matters */
  --gutter:      clamp(1rem, 2vw + 0.25rem, 2.5rem);
  --section-y:   clamp(3rem, 6vw + 1rem, 8rem);
  --max-w:       1440px;

  /* Geometry */
  --hairline: 1px;
  --hairline-color: var(--ink-16);
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;

  /* Motion */
  --ease-out:  cubic-bezier(.16,.84,.36,1);
  --ease-in:   cubic-bezier(.7,.0,.84,.0);
  --ease-io:   cubic-bezier(.6,0,.2,1);
  --dur-fast:  160ms;
  --dur:       320ms;
  --dur-slow:  640ms;
  --dur-xslow: 1200ms;

  /* Elevation — sparse on purpose */
  --shadow-card: 0 12px 30px -16px var(--ink-16);
  --shadow-hero: 0 30px 80px -30px rgba(14,14,15,.34);

  color-scheme: light;
}

/* Base resets that complement Tailwind preflight */
html { background: var(--marble); }
body, input, textarea, button, select {
  font-family: var(--font-body);
  font-weight: var(--weight-thin);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
}
/* The Year of The Camel — thin display, gentle tracking on the very large sizes
   so the thin strokes read crisply at any scale. */
h1 { font-weight: var(--weight-thin);    letter-spacing: -0.02em; }
h2 { font-weight: var(--weight-thin);    letter-spacing: -0.01em; }
h3 { font-weight: var(--weight-light);   letter-spacing: 0; }
h4 { font-weight: var(--weight-regular); letter-spacing: 0; }

/* Numeric utility — apply to ASTM values, stats, coords, years */
.num,
.data,
[data-num] {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums slashed-zero;
  font-feature-settings: "tnum" 1, "lnum" 1, "ss01" 1, "zero" 1;
}

/* Eyebrow — Latin only; AR uses .eyebrow-ar (see i18n.css) */
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--type-eyebrow);
  font-weight: 500;
  color: var(--gold);
}

/* Hairline rule */
.hairline {
  height: var(--hairline);
  background: var(--hairline-color);
  border: 0;
}
.hairline-v {
  width: var(--hairline);
  background: var(--hairline-color);
  align-self: stretch;
}

/* Reduce motion — global respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}