/*
 * slotly — design tokens (정본). The pages load this file; style.css uses var() only.
 * Names follow the Tailwind 4 @theme namespaces so the block can move into globals.css `@theme { … }` unchanged on promotion.
 * Contrast is measured in _design/DESIGN.md (node build.mjs --contrast slotly).
 * Lens: minimalist-ui. The lens suggests a warm bone canvas; this template uses pure white, because the brief bans paper/kraft backgrounds.
 */
:root {
  /* ── colour: canvas & ink ─────────────────────────────────────────── */
  --color-canvas: #ffffff;        /* page and calendar sheet */
  --color-surface: #f4f5f7;       /* time gutter, Team column, demo strip, bands */
  --color-surface-sunk: #eceef1;  /* closed day, table header, pressed segment */
  --color-ink: #16181c;           /* text, primary button, now line, selected outline */
  --color-ink-2: #474c55;         /* secondary text, including text inside booking blocks */
  --color-muted: #62676f;         /* captions and hour labels, on canvas/surface only, never on pastels or the accent */
  --color-line: #e4e6ea;          /* hairlines, hour rules, hatch stripes (decorative, not a text colour) */
  --color-line-strong: #868c95;   /* outlines that identify a control: secondary button, open-slot dash (≥3:1) */

  /* ── colour: the one accent — a highlighter ───────────────────────── */
  --color-accent: #ffe14a;        /* fill only: marker swipe, new booking, "Most booked", now-chip text on ink. Never text or thin lines on white */

  /* ── colour: booking blocks — four services, pastel fill + deeper 3px rule ── */
  --color-slot-sky-bg: #dcebfb;   /* salon: Cut & finish · clinic: Check-up · studio: Class */
  --color-slot-sky: #2f6fb3;
  --color-slot-rose-bg: #fbe3e6;  /* salon: Colour · clinic: Treatment · studio: Private session */
  --color-slot-rose: #c2475c;
  --color-slot-sage-bg: #dcefe2;  /* salon: Treatment · clinic: Physio · studio: Workshop */
  --color-slot-sage: #2f7d4f;
  --color-slot-peach-bg: #fde6d4; /* salon: Consult · clinic: First visit · studio: Trial */
  --color-slot-peach: #b4561f;

  /* ── type ─────────────────────────────────────────────────────────── */
  --font-display: "Schibsted Grotesk", "Pretendard Variable", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Pretendard Variable", Pretendard, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;                 /* 12 — booking block meta, table tags, hour labels */
  --text-xs--line-height: 1.35;
  --text-sm: 0.875rem;                /* 14 — UI text, captions, table cells */
  --text-sm--line-height: 1.45;
  --text-base: 1rem;                  /* 16 — body */
  --text-base--line-height: 1.6;
  --text-lg: 1.125rem;                /* 18 — hero subline, lead paragraphs */
  --text-lg--line-height: 1.55;
  --text-xl: 1.375rem;                /* 22 — feature titles, client name in detail panel */
  --text-xl--line-height: 1.3;
  --text-xl--letter-spacing: -0.01em;
  --text-2xl: 1.75rem;                /* 28 — plan names, "Closed. Back at 09:00." */
  --text-2xl--line-height: 1.2;
  --text-2xl--letter-spacing: -0.015em;
  --text-3xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);          /* 32→48 — section heads */
  --text-3xl--line-height: 1.08;
  --text-3xl--letter-spacing: -0.025em;
  --text-numeral: clamp(2.5rem, 1.6rem + 3vw, 4rem);      /* 40→64 — proof numbers, prices (tabular) */
  --text-numeral--line-height: 1;
  --text-numeral--letter-spacing: -0.03em;
  --text-display: clamp(2.75rem, 1.35rem + 4.6vw, 5.25rem); /* 44→84 — H1 only, one per page */
  --text-display--line-height: 0.98;
  --text-display--letter-spacing: -0.04em;

  /* ── spacing (Tailwind base unit + named layout measures) ─────────── */
  --spacing: 0.25rem;                 /* 4px — every gap is a multiple */
  --spacing-hour: 4rem;               /* 64 — one hour in the calendar (desktop); 15 min = 16px, on the 4px scale */
  --spacing-hour-compact: 3rem;       /* 48 — one hour on phones; 15 min = 12px */
  --spacing-hours-col: 3.5rem;        /* 56 — calendar time column */
  --spacing-hours-col-compact: 2.5rem;/* 40 */
  --spacing-gutter: 5.5rem;           /* 88 — the page's own time gutter (landing, desktop) */
  --spacing-nav: 4.5rem;              /* 72 → 56 when scrolled / on phones */
  --spacing-nav-compact: 3.5rem;
  --spacing-rail: 14.5rem;            /* 232 — app side nav */
  --spacing-panel: 21.25rem;          /* 340 — booking detail panel */
  --spacing-content: 80rem;           /* 1280 — max content width (the hero calendar ignores it and bleeds right) */
  --spacing-prose: 44rem;             /* FAQ and long text measure */
  --spacing-page: clamp(1.25rem, 0.5rem + 3vw, 3rem);     /* side padding 20→48 */
  --spacing-section: clamp(5rem, 3rem + 6vw, 9rem);       /* 80→144 between hour sections */

  /* ── radius — crisp, never pill-shaped containers ─────────────────── */
  --radius-xs: 3px;                   /* booking blocks */
  --radius-sm: 6px;                   /* buttons, chips, segmented controls */
  --radius-md: 10px;                  /* bento cells, detail panel, table wrap */
  --radius-lg: 12px;                  /* calendar sheet, app window, bottom sheet top corners */
  --radius-pill: 999px;               /* avatars, tags, now chip — small things only */

  /* ── shadow — practically none; depth comes from 1px lines ────────── */
  --shadow-lift: 0 2px 8px rgb(22 24 28 / 0.05);          /* hover on bento cells and booking blocks */
  --shadow-pop: 0 8px 24px -8px rgb(22 24 28 / 0.12);     /* toast, mobile menu */
  --shadow-sheet: 0 -12px 32px rgb(22 24 28 / 0.1);       /* mobile bottom sheet only */

  /* ── easing ───────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);              /* reveals, panel crossfade, sheet slide in */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);          /* now chip travel, number ticker */
  /* impeccable-disable-next-line bounce-easing: one small overshoot for booking blocks dropping into the grid (Pop in, once on load) — never used elsewhere */
  --ease-drop: cubic-bezier(0.34, 1.4, 0.64, 1);          /* booking blocks popping into the grid — one small overshoot */
}