@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400..800;1,400..800&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ---- tokens/fonts.css ---- */
/* Webfonts — BIG TRIP PLANNER (S228, his ruling 4 Nov 2026: Google's split, his faces)
   Inter Tight (display): the wordmark, window titles, page headings - "I
   just prefer Inter Tight" for Big Trip Planner. Barlow (everything else):
   the blocks on the calendar, help lines, buttons, chips, times, dates and
   costs - the most compact plain face he liked, with lined-up (tabular)
   figures so columns of times still align. Schibsted Grotesk and DM Sans
   (S228 Stage 2) are retired. */

/* ---- tokens/colors.css ---- */
/* ─────────────────────────────────────────────
   COLOR TOKENS — light theme — BIG TRIP PLANNER
   (S228, 3 Nov 2026: Brand A's look, chosen by Rupert on 3 Nov.
    Replaces Meridian's warm paper + indigo. Record:
    docs/Project docs/DESIGN_BRANDS_DETAIL_S227.md)

   The idea: a timetable. Cool, near-white paper; ink-black
   type and wordmark; ONE petrol accent for anything you can
   press. Every other colour on the page carries a meaning —
   an event family, a place, a state — so the chrome stays
   quiet and the calendar's own colour reads.

   Every hue-carrying colour is oklch so lightness and chroma
   stay constant across hues. Same variable names as before,
   new values: the app reads these and nothing else.
   ───────────────────────────────────────────── */
:root {
  /* Neutrals — cool (hue 230-240), not warm */
  --paper:          oklch(97.8% 0.003 230);   /* app background */
  --surface:        #ffffff;                   /* cards, modals, blocks */
  --surface-sunken: oklch(95.8% 0.004 230);   /* wells, time column */
  --ink:            oklch(19% 0.012 240);     /* primary text — near-black */
  --ink-2:          oklch(38% 0.012 240);     /* secondary text */
  --ink-3:          oklch(54% 0.010 240);     /* tertiary / labels */
  --ink-4:          oklch(70% 0.008 240);     /* disabled / hints */
  --line:           oklch(19% 0.012 240 / 0.12);  /* default hairline */
  --line-strong:    oklch(19% 0.012 240 / 0.24);
  --scrim:          oklch(19% 0.012 240 / 0.46);  /* modal backdrop */

  /* Brand — the wordmark is INK, not a colour. The globe mark and the
     one accent are petrol (#006874). */
  --brand:       oklch(22% 0.020 215);  /* ink-black with a petrol undertone — headers, wordmark */
  --accent:      oklch(46% 0.105 205);  /* petrol: buttons, links, selection, focus — the ONE accent */
  --accent-hover:oklch(40% 0.105 205);
  --accent-soft: oklch(93.5% 0.030 205); /* selected fills, hover washes */
  --on-accent:   #ffffff;

  /* Event types — three roles per type: bg (fill), edge (border), text.
     Hues re-spaced around the petrol accent (205) so no block reads as a button:
     activity 135 · transit 172 · [accent 205] · flight 262 · hotel 310 · hire 345 · airport 78 */
  --evt-flight-bg:    oklch(95.5% 0.022 262);
  --evt-flight-edge:  oklch(58% 0.115 262);
  --evt-flight-text:  oklch(36% 0.095 262);
  --evt-transit-bg:   oklch(95.5% 0.022 172);
  --evt-transit-edge: oklch(58% 0.100 172);
  --evt-transit-text: oklch(35% 0.075 172);
  --evt-hotel-bg:     oklch(95.5% 0.022 310);
  --evt-hotel-edge:   oklch(58% 0.110 310);
  --evt-hotel-text:   oklch(36% 0.095 310);
  --evt-airport-bg:   oklch(95.5% 0.025 78);   /* check-in / customs windows */
  --evt-airport-edge: oklch(62% 0.105 78);
  --evt-airport-text: oklch(40% 0.085 78);
  --evt-activity-bg:  oklch(95.5% 0.022 135);
  --evt-activity-edge:oklch(58% 0.100 135);
  --evt-activity-text:oklch(34% 0.080 135);
  /* S228 (his ruling, 3 Nov 2026: "Own colour"): the hire car is a holding
     across days, not a journey, so it must not read as a long taxi. Rose,
     the one free hue between hotel (310) and error (22). */
  --evt-hire-car-bg:   oklch(95.5% 0.022 345);
  --evt-hire-car-edge: oklch(58% 0.110 345);
  --evt-hire-car-text: oklch(36% 0.095 345);
  --evt-free-bg:      oklch(97% 0.005 240);
  --evt-free-edge:    oklch(75% 0.010 240);
  --evt-free-text:    var(--ink-3);

  /* States — unchanged jobs. Warning stays the S199 orange ("a bit more
     of a pop"); its 135° hatch is the "add transport" prompt and nothing else. */
  --error:      oklch(52% 0.165 22);
  --error-bg:   oklch(96% 0.020 22);
  --error-edge: oklch(60% 0.160 22);
  --warning:    oklch(64% 0.190 45);
  --warning-bg: oklch(96.5% 0.035 60);
  --warning-edge: oklch(70% 0.185 48);
  --warning-text: oklch(47% 0.150 45);  /* words on a warning wash — the canvas's alert heading ink */
  --success:    oklch(50% 0.120 150);
  --success-bg: oklch(96% 0.022 150);
  --info:       oklch(50% 0.110 262);
  --info-bg:    oklch(96% 0.020 262);

  /* Location-banner wheel — 12 hues, constant L/C so any city reads as a
     peer of any other. A touch darker and crisper than Meridian's (48/0.11
     vs 50/0.105) so the strips hold their own against ink-black type.
     Assignment: see readme (golden-step by visit order). */
  --banner-1:  oklch(48% 0.11 250);  /* cobalt   */
  --banner-2:  oklch(48% 0.11 160);  /* jade     */
  --banner-3:  oklch(48% 0.11 40);   /* clay     */
  --banner-4:  oklch(48% 0.11 310);  /* plum     */
  --banner-5:  oklch(48% 0.11 205);  /* petrol   */
  --banner-6:  oklch(48% 0.11 100);  /* olive    */
  --banner-7:  oklch(48% 0.11 355);  /* rosewood */
  --banner-8:  oklch(48% 0.11 130);  /* fern     */
  --banner-9:  oklch(48% 0.11 280);  /* iris     */
  --banner-10: oklch(48% 0.11 70);   /* bronze   */
  --banner-11: oklch(48% 0.11 225);  /* slate-blue */
  --banner-12: oklch(48% 0.11 15);   /* garnet   */
  --banner-text: oklch(98% 0.003 230 / 0.96);
  --banner-home: oklch(48% 0.012 240); /* neutral: "Home" is no destination */

  /* User re-colour picker — 12 hue swatches + 2 neutrals, all one L/C */
  --pick-1:  oklch(62% 0.115 250);
  --pick-2:  oklch(62% 0.115 220);
  --pick-3:  oklch(62% 0.115 185);
  --pick-4:  oklch(62% 0.115 160);
  --pick-5:  oklch(62% 0.115 130);
  --pick-6:  oklch(62% 0.115 100);
  --pick-7:  oklch(62% 0.115 70);
  --pick-8:  oklch(62% 0.115 40);
  --pick-9:  oklch(62% 0.115 15);
  --pick-10: oklch(62% 0.115 340);
  --pick-11: oklch(62% 0.115 310);
  --pick-12: oklch(62% 0.115 280);
  --pick-13: oklch(55% 0.012 240);   /* graphite */
  --pick-14: oklch(74% 0.010 240);   /* mist     */

  /* Day/night column tinting — sequence per sun cycle (top→bottom):
     night → twilight(violet) → SUN LINE → blaze(orange) → day(pale cyan),
     mirrored at sunset. These are the sky's colours, not the brand's:
     kept, the night a shade cooler to sit on the cool paper. */
  --tint-night:    oklch(84% 0.050 255 / 0.55);
  --tint-twilight: oklch(86% 0.060 305 / 0.55);
  --tint-blaze:    oklch(88% 0.085 65 / 0.65);
  --tint-day:      oklch(96% 0.022 210 / 0.45);
  --sun-line:      oklch(88% 0.165 100);          /* the bright yellow sun line */
  --sun-glow:      oklch(90% 0.150 95 / 0.75);

  /* The weather words' colours (S228, the inventory page, 4 Nov 2026): text
     only, never a fill - his S181 ask, blue for colder and warmer colours
     for hot. "Comfortable" is plain --ink-2. */
  --temp-cold: oklch(45% 0.12 250);
  --temp-warm: oklch(50% 0.12 60);
  --temp-hot:  oklch(48% 0.16 30);
}

/* ---- tokens/typography.css ---- */
/* ─────────────────────────────────────────────
   TYPOGRAPHY TOKENS — BIG TRIP PLANNER (S228)
   Display + body: Schibsted Grotesk (Brand A).
   Times, dates, codes: DM Sans with tabular
   figures (his ruling 3 Nov 2026: "DM Sans over
   Inter Tight, but only just"; reverses the
   brief's mono face).
   The SCALE is unchanged from Meridian: same pixel
   sizes and line-heights, so no page reflows.
   ───────────────────────────────────────────── */
:root {
  --font-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;   /* the big words (S228, 4 Nov) */
  --font-body:    "Barlow", "Helvetica Neue", Arial, sans-serif;        /* everything you read (his pick over all-Inter-Tight, 4 Nov) */
  --font-time:    "Barlow", "Helvetica Neue", Arial, sans-serif;        /* times, dates, costs: Barlow with tnum */

  /* Type scale (size / line-height) */
  --text-2xs: 10px;  --lh-2xs: 12px;   /* sliver labels, axis ticks   */
  --text-xs:  11px;  --lh-xs:  14px;   /* block meta, banner text     */
  --text-sm:  12.5px;--lh-sm:  17px;   /* block titles, table cells   */
  --text-md:  14px;  --lh-md:  20px;   /* body, inputs, buttons       */
  --text-lg:  16px;  --lh-lg:  22px;   /* modal titles, day numbers   */
  --text-xl:  20px;  --lh-xl:  26px;   /* page section titles         */
  --text-2xl: 26px;  --lh-2xl: 32px;   /* trip title                  */
  --text-3xl: 34px;  --lh-3xl: 40px;   /* marketing / empty states    */

  /* Weights — Schibsted Grotesk is a 400–900 variable face */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* Tracking */
  --track-tight: -0.012em;  /* display sizes      */
  --track-caps:  0.08em;    /* uppercase labels   */

  /* Time styling shorthand pieces — "tnum" asks DM Sans for its
     lined-up figures, so 09:05 and 11:40 take the same width. */
  --time-weight: 500;
  --time-feature: "tnum" 1;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* The wordmark's words (S228): "Big Trip" heavy, "Planner" light — the
   recommended pairing (B) while his pick of the words is open. One rule,
   served to every page by the bundle, so the pairing changes in one place.
   The wordmark wears the display face (his ruling 4 Nov: Inter Tight). */
.wm { font-family: var(--font-display); }
.wm-light { font-weight: var(--w-regular); }

/* ---- tokens/spacing.css ---- */
/* ─────────────────────────────────────────────
   SPACING · RADII · BORDERS · SHADOWS · MOTION
   ───────────────────────────────────────────── */
:root {
  /* 4px base scale */
  --sp-05: 2px;  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px;

  /* Radii — one language: blocks 6, controls 8, cards 12, modals 16 */
  --r-block: 6px;
  --r-control: 8px;
  --r-card: 12px;
  --r-modal: 16px;
  --r-pill: 999px;

  /* Border rule: ONE hairline everywhere. Meaning is carried by the
     block's fill, edge and title, never by dashed/solid variation.
     S199 (his ruling): the 4px left spine is HIDDEN on every block
     ("too much like a typical Claude design"), and the brand of S227/S228
     keeps it off. The width below is now only the words' left padding
     inside a block (canvas inkX) and the hidden spine's size; paintChains
     still reads the hidden spine's fill for a linked run's colour. */
  --border-block: 1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --spine-w: 4px;

  /* Shadows — cool-tinted, soft; blocks get none at rest */
  --shadow-1: 0 1px 2px oklch(24% 0.02 265 / 0.06);
  --shadow-2: 0 2px 8px -2px oklch(24% 0.02 265 / 0.12), 0 1px 2px oklch(24% 0.02 265 / 0.06);
  --shadow-3: 0 12px 32px -8px oklch(24% 0.02 265 / 0.22), 0 2px 8px -2px oklch(24% 0.02 265 / 0.10);
  --shadow-float: 0 4px 12px -2px oklch(24% 0.02 265 / 0.18);  /* dragged / floating labels */

  /* Focus */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
}