/* ─────────────────────────────────────────────────────────────────────────
   AC CREATIONS — the compiled theme
   Tailwind v4 @theme format. Drop into src/styles/global.css.

   Compiled from ac-creations.tokens.json. Do not hand-edit this file and the
   JSON separately — the JSON is the source, this is the build artefact.

   Written 4 Sep 2026 against the rulings on "AC Creations — the surface
   system" (Notion). Every value here has a written reason there.

   THE THREE RULES THAT ARE EASY TO BREAK IN CODE
   1. Only navy and bone may hold a ground. Terracotta and purple never do.
   2. Navy never appears on a dark ground — it lifts to --color-brand-on-dark.
   3. Every component's x and y offset is a whole number of --spacing-tile,
      so the Weave belongs to the page and not to the component.
   ───────────────────────────────────────────────────────────────────────── */

@theme {
  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Fira Sans", system-ui, sans-serif;
  --font-mono: "Fira Code", ui-monospace, monospace;

  --text-display-xl: 72px;
  --text-display-l: 56px;
  --text-h1: 44px;
  --text-h2: 34px;
  --text-h3: 26px;
  --text-lede: 20px;
  --text-body: 17px;
  --text-caption: 14px;
  --text-eyebrow: 12px;
  --text-micro: 12.5px;

  --leading-display-xl: 76px;
  --leading-display-l: 60px;
  --leading-h1: 48px;
  --leading-h2: 39px;
  --leading-h3: 31px;
  --leading-lede: 32px;
  --leading-body: 28px;
  --leading-caption: 21px;
  --leading-eyebrow: 18px;
  --leading-micro: 19px;

  --tracking-display-xl: -0.02em;
  --tracking-display-l: -0.015em;
  --tracking-h1: -0.01em;
  --tracking-h2: -0.01em;
  --tracking-h3: 0em;
  --tracking-body: 0em;
  --tracking-caption: 0.01em;
  --tracking-eyebrow: 0.14em;
  --tracking-micro: 0.02em;

  --font-weight-regular: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  /* ── Primitive colour ─────────────────────────────────────────────────── */
  --color-navy-950: #000c82;
  --color-navy-900: #04139a;
  --color-navy-800: #091db3;
  --color-navy-700: #0d28d3;
  --color-navy-600: #1436f5;
  --color-navy-500: #4d65ff;
  --color-navy-400: #7a8eff;
  --color-navy-300: #a3afff;
  --color-navy-200: #c7cdff;
  --color-navy-100: #e0e3ff;
  --color-navy-050: #f2f3ff;
  --color-navy-975: #00074c;

  --color-bone-100: #f4f2ee;
  --color-bone-200: #e7e2f2;
  --color-bone-white: #fefefe;

  --color-terracotta-500: #a7534b;
  --color-terracotta-300: #c87c72;

  --color-purple-500: #783487;
  --color-purple-300: #ba73c9;

  --color-charcoal: #2b2b2a;
  --color-ink: #1a1a2e;

  /* ── Semantic colour — reference these, not the primitives ───────────── */
  --color-ground-light: var(--color-bone-100);
  --color-ground-light-2: var(--color-bone-200);
  --color-ground-raised: var(--color-bone-white);
  --color-ground-dark: var(--color-navy-975);

  --color-brand-on-light: var(--color-navy-950);
  --color-brand-on-dark: var(--color-navy-400);

  --color-accent-on-light: var(--color-terracotta-500);
  --color-accent-on-dark: var(--color-terracotta-300);

  --color-flourish-on-light: var(--color-purple-500);
  --color-flourish-on-dark: var(--color-purple-300);

  --color-text-on-light: var(--color-ink);
  --color-text-on-light-muted: rgb(26 26 46 / 75%);
  --color-text-on-dark: var(--color-bone-100);
  --color-text-on-dark-muted: rgb(244 242 238 / 82%);
  --color-heading-light: var(--color-navy-950);
  --color-heading-dark: var(--color-bone-100);
  --color-eyebrow-light: rgb(0 12 130 / 60%);
  --color-eyebrow-dark: var(--color-terracotta-300);

  /* Colour encodes WHERE YOU ARE, not rank. */
  --color-section-work: var(--color-navy-950);
  --color-section-notes: var(--color-terracotta-500);
  --color-section-library: var(--color-purple-500);
  --color-section-about: var(--color-charcoal);

  --color-focus-ring: var(--color-terracotta-500);
  --color-selection: rgb(0 12 130 / 18%);
  --color-disabled-light: rgb(26 26 46 / 35%);

  --color-card-border: rgb(0 12 130 / 14%);
  --color-code-bg: rgb(0 12 130 / 5%);
  --color-code-gutter: rgb(0 12 130 / 40%);

  /* ── Spacing — every step is a multiple of the Weave tile ─────────────── */
  --spacing-tile: 20px;
  --spacing-quarter: 5px;
  --spacing-half: 10px;
  --spacing-1: 20px;
  --spacing-2: 40px;
  --spacing-3: 60px;
  --spacing-4: 80px;
  --spacing-6: 120px;
  --spacing-8: 160px;

  /* ── The shoulder ─────────────────────────────────────────────────────
     One corner takes a radius of half the component's height. Every other
     corner stays at --radius-quiet. Never a uniform radius.               */
  --radius-quiet: 6px;
  --radius-chip: 16px;
  --radius-button: 24px;
  --radius-input: 26px;
  --radius-card: 44px;
  --radius-panel: 60px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --duration-press: 100ms;
  --duration-fast: 200ms;
  --duration-base: 700ms;
  --duration-room: 1200ms;
  --duration-lead: 80ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────────────────
   THE PATTERNS THAT ARE NOT TOKENS
   These need code, not values. They are the three easiest things to get
   wrong, so they are written out.
   ───────────────────────────────────────────────────────────────────────── */

/* 1 · The shoulder. Applied per side, never as one radius. */
.ac-shoulder {
  border-radius: var(--radius-button) var(--radius-quiet) var(--radius-quiet)
    var(--radius-quiet);
}

/* 2 · The focus ring FOLLOWS the shoulder. A rectangle around a shaped
      control is the giveaway that the radius was cosmetic. */
.ac-shoulder:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: calc(var(--radius-button) + 2px) calc(var(--radius-quiet) + 2px)
    calc(var(--radius-quiet) + 2px) calc(var(--radius-quiet) + 2px);
}

/* 3 · The Weave is registered to the PAGE, not the element. Because every
      offset is a whole number of tiles, background-position needs no
      per-element correction — the grain runs unbroken across boundaries. */
.ac-weave {
  background-image: url("/brand/w-fine-navy.svg");
  background-repeat: repeat;
  background-position: 0 0;
}
.ac-weave--stripe {
  background-image: url("/brand/w-stripe-navy.svg");
}
/* .ac-weave--tone retired 16 Oct 2026: one grain only (10px half-drop, 20 x 10 repeat).
   Presence by date (the ladder): 9 % this month, 6 % this year, 3 % for one to three
   years, nothing for older work. The 6 % and 3 % tiles are a code row on the
   akshansh.net Build Log (Order 69), awaiting the merge yes. */
/* Never below this width — the grain stops being tone and becomes a motif. */
@media (max-width: 100px) {
  .ac-weave { background-image: none; }
}

::selection {
  background: var(--color-selection);
}

/* ── Print. One colour, and the Weave does not print. ──────────────────── */
@media print {
  :root {
    --color-ground-light: #ffffff;
  }
  .ac-weave,
  .ac-weave--stripe,
  .ac-weave--tone {
    background-image: none !important;
  }
  body {
    color: var(--color-navy-950);
    font-size: 11.5px;
    line-height: 18px;
  }
  /* Body measure holds at 65ch in print. */
  main {
    max-width: 65ch;
  }
}

/* ── Motion. Colour leads shape by --duration-lead. ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 160ms !important;
    transition-duration: 160ms !important;
    /* Opacity only. No transforms, no draw-on. */
    transition-property: opacity, color, background-color !important;
  }
}