/* ============================================================
   touchup mafia — design tokens
   Citra Bestari · Makeup Artist · Jakarta

   Every value here is sourced, not invented:
   · colour + type sizes  → measured off carlijnjacobs.com (Cargo),
     paulethenriette.com, tylermitchell.co, samthies.com, streeters.com
   · geometry             → touchupmafia-branding.pdf (Illustrator, outlined)
   · motion               → Cargo platform defaults
   ============================================================ */

/* Acronym — the brand face. Converted from the licensed desktop OTFs;
   see the LICENCE note in the TYPE section below. */
@font-face {
  font-family: "Acronym";
  src: url("../assets/font/acronym-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Acronym";
  src: url("../assets/font/acronym-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     COLOUR

     The genre rule: never pure black on pure white. Paper, not
     screen. Cargo ships rgba(0,0,0,0.85) text and rgba(0,0,0,0.2)
     rules; Paul & Henriette grounds on #f9f9f9. We follow both.
     -------------------------------------------------------- */

  /* Ground — light is the default. Editorial/gallery convention,
     and it is what pages 1 and 3 of the brand deck are. */
  --ground:            oklch(98.1% 0 0);        /* #f9f9f9 */
  --ground-sunk:       oklch(95.8% 0 0);        /* image wells, table zebra */

  /* Ink — 85% black, never 100%. This single value does more for
     "expensive" than any other in the file. */
  --ink:               oklch(0% 0 0 / 0.85);
  --ink-quiet:         oklch(0% 0 0 / 0.68);    /* metadata, captions — AA at 10px */
  --ink-faint:         oklch(0% 0 0 / 0.32);    /* disabled, placeholder */
  --hairline:          oklch(0% 0 0 / 0.20);    /* every rule on the site */
  --hairline-soft:     oklch(0% 0 0 / 0.08);

  /* Hover, everywhere on the site. Ten percent of the ground mixed into the
     ink: the text lifts slightly and nothing moves. An underline arriving on
     hover is a second mark drawn for an event the colour already reported,
     and it shifts the baseline grid by a pixel while it does it. */
  --ink-hover:         color-mix(in oklch, var(--ink) 90%, var(--ground));

  /* The one accent. Reserved for STATE, never decoration:
     the booking action, an overdue invoice, the LUNAS stamp.
     If it appears twice on a screen for two different reasons,
     one of them is wrong. */
  --signal:            oklch(56% 0.208 29);     /* ≈ #d13a2a — stamp-pad red */
  --signal-quiet:      oklch(56% 0.208 29 / 0.12);

  /* --------------------------------------------------------
     TYPE

     One family: Acronym, the face named in the 2026 brand
     guideline. Regular and Bold, self-hosted.

     Monospace is deliberately absent here. It belongs to the
     invoice and nowhere else — a receipt is a machine artefact,
     the site is not, and using the same mono on both flattens
     the distinction that makes the receipt read as a receipt.

     LICENCE: the .otf files these were converted from are
     desktop-licensed. A web licence must be bought from the
     foundry before this ships publicly.
     -------------------------------------------------------- */
  --face-ui:    "Acronym", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --face-meta:  var(--face-ui);

  /* Interface type is TINY in this genre. Measured bases:
     Paul & Henriette 12px/15px · Sam Thies 10/11/12/16/18
     · Carlijn Jacobs 10/12/14/20 · Kai Blamey 12/14/16.
     Nothing here uses a 16px UI base. */
  --text-micro:  0.625rem;   /* 10px — credits, counters, legal */
  --text-small:  0.6875rem;  /* 11px — nav, labels, IG link */
  --text-base:   0.75rem;    /* 12px — the workhorse */
  --text-read:   0.9375rem;  /* 15px — the bio paragraph, and ONLY that */

  /* Display is enormous and the jump is discontinuous. Tyler
     Mitchell runs 1rem → 10.44rem with nothing between: two
     sizes, tiny and huge. We keep that shape. */
  --text-display:    clamp(2.25rem, 1rem + 9.5vw, 10.5rem);
  --text-display-sm: clamp(1.5rem, 0.9rem + 3.2vw, 3.25rem);

  /* Tracking: negative on display, positive on small caps.
     Reversing this is one of the loudest amateur tells. */
  --track-display: -0.022em;
  --track-caps:     0.09em;
  --track-meta:     0.02em;

  --leading-tight: 0.92;   /* display — lines should nearly touch */
  --leading-ui:    1.25;   /* 12px/15px, measured */
  --leading-read:  1.55;   /* the bio only */

  --weight-normal: 400;
  --weight-bold:   700;    /* two weights. there is no third. */

  /* --------------------------------------------------------
     GEOMETRY

     The 2026 identity is handwritten: a one-line signature
     (~1167 × 240) and a stacked lockup (~424 × 208) that also
     serves as the favicon. Hand-drawn marks have no modular grid
     to inherit, so the page keeps a plain 8px rhythm.
     -------------------------------------------------------- */
  --mark-sm:   24px;
  --mark-md:   40px;
  --mark-lg:   64px;
  --mark-xl:   120px;   /* the booking badge */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   40px;
  --space-6:   64px;
  --space-7:  104px;
  --space-section: clamp(64px, 4rem + 6vw, 168px);

  --gutter: clamp(16px, 1rem + 1.5vw, 40px);

  /* Zero. Rounded corners on media are a template signal;
     Cargo's own default is 0 0 0 0. */
  --radius-media: 0px;
  --radius-ui:    0px;

  /* --------------------------------------------------------
     MOTION

     Cargo platform defaults, which the whole genre has absorbed.
     Note out < in: you leave faster than you arrive.
     -------------------------------------------------------- */
  --ease: cubic-bezier(0.45, 0.05, 0.33, 1);

  --dur-hover:  200ms;   /* image lift. 1.02 scale, not 1.1 */
  --dur-in:     220ms;
  --dur-out:    175ms;
  --dur-reveal: 500ms;   /* LQIP blur-up — reads like film developing */

  --lift: 1.02;          /* hover scale. 1.1 looks cheap. */

  /* --------------------------------------------------------
     LAYOUT

     Sam Thies' variable centre column: one centred track whose
     width changes per image. Editorial rhythm from three classes
     and no masonry library.
     -------------------------------------------------------- */
  --col-narrow: 30vw;
  --col-mid:    40vw;
  --col-wide:   50vw;

  --measure: 34ch;       /* the bio. short is the point. */

  /* A figure in a four-across ledger line cannot be 10rem, and Rupiah is
     long: Rp127.500.000 is thirteen characters. This caps lower than
     --text-display-sm and still reads as the brand's "huge". */
  --text-figure: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);

  /* The same figure with a column to itself. A booking estimate is the
     headline of its rail, not one cell in a four-across line, so it gets the
     size the brand uses for a number that matters. Still short of
     --text-display-sm: "from Rp12.500.000 + transport" has to hold on one
     phone line and a half, not three. */
  --text-figure-lg: clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem);

  --text-lede:   clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);

  /* Ground tints. The quantity drawn along a rule, a hovered row, a
     selected tab — everything that needs weight without colour. */
  --fill:        oklch(0% 0 0 / 0.065);
  --fill-strong: oklch(0% 0 0 / 0.115);

  /* 50px is the canonical contact-sheet height, but that only reads as
     an index at hundreds of frames. At seven it needs to be legible. */
  --contact-sheet-h: 88px;

  /* Acronym maps "oe" to an œ ligature. Indonesian names are full of oe —
     Soemantri, Soekarno, Moeis — so a common ligature here is a misspelling.
     fi and fl go with it; at a 10–12px UI base nobody will miss them. */
  font-variant-ligatures: no-common-ligatures;

  color-scheme: light;
}

/* ============================================================
   INVERSE

   Not a theme toggle — the user never asked for one. This is a
   section treatment: the booking block and the footer, matching
   pages 2 and 4 of the brand deck. Dark grounds also flatter
   skin-tone imagery, which is the whole product here.
   ============================================================ */

[data-scheme="dark"] {
  --ground:        oklch(14% 0 0);          /* near-black, never #000 */
  --ground-sunk:   oklch(18% 0 0);

  --ink:           oklch(100% 0 0 / 0.88);
  --ink-quiet:     oklch(100% 0 0 / 0.70);
  --ink-faint:     oklch(100% 0 0 / 0.34);
  --hairline:      oklch(100% 0 0 / 0.22);
  --hairline-soft: oklch(100% 0 0 / 0.10);

  /* Lifted for contrast against the dark ground. */
  --signal:        oklch(66% 0.195 30);
  --signal-quiet:  oklch(66% 0.195 30 / 0.16);

  --fill:          oklch(100% 0 0 / 0.085);
  --fill-strong:   oklch(100% 0 0 / 0.145);

  color-scheme: dark;
}

/* ============================================================
   MOTION PREFERENCES

   Non-negotiable. Reveals resolve instantly, hover lift is
   cancelled, nothing is lost.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms;
    --dur-in: 1ms;
    --dur-out: 1ms;
    --dur-reveal: 1ms;
    --lift: 1;
  }
}