/*
 * TIMELESS — DESIGN TOKENS
 * Structural language borrowed from apple.com: true-black grounds, huge
 * restrained type, minimal chrome, generous whitespace, translucent sticky
 * nav, full-bleed sections. Colour and type identity stay Timeless's own —
 * Deep Blue / Light Blue / Turquoise from reference/Brand Guidelines.md,
 * Carlito throughout (no SF Pro).
 *
 * This build is DARK-FIRST BY DESIGN (the explicit ask), so unlike a normal
 * light-default token set, dark is the bare :root and a light override only
 * exists for a user who explicitly asks for it via the theme toggle.
 *
 * Everything a component needs — colour, type, spacing, radius, motion,
 * elevation, focus, z-index, breakpoints — lives here. If a value shows up
 * more than once anywhere in css/ or js/, it belongs on one of these scales,
 * not typed out again at the call site.
 */

:root {
  /* brand */
  --tl-deep-blue: #1800ad;
  --tl-light-blue: #38b6ff;
  --tl-turquoise: #0097b2;
  --tl-white: #ffffff;

  /* type */
  --tl-font: "Carlito", Calibri, "Helvetica Neue", Arial, sans-serif;

  /* display type scale — apple-style: huge headlines, tight tracking, a hard
     drop to a readable body size. clamp() so it scales with the viewport
     rather than jumping at breakpoints. */
  --tl-fs-display: clamp(2.75rem, 4vw + 1.5rem, 5.5rem);
  --tl-fs-h2: clamp(1.75rem, 1.6vw + 1rem, 2.5rem);
  --tl-fs-h3: 1.375rem;
  --tl-fs-lg: 1.125rem;
  --tl-fs-base: 1rem;
  --tl-fs-caption: 0.8125rem;  /* 13px — eyebrow, primary nav links, toolbar captions */
  --tl-fs-sm: 0.875rem;
  --tl-fs-xs: 0.75rem;
  --tl-fs-2xs: 0.6875rem;      /* 11px — pill toggle, search icon */
  --tl-fs-3xs: 0.625rem;       /* 10px — badges, calendar chips, uppercase micro-labels */
  --tl-tracking-display: -0.03em;
  --tl-tracking-tight: -0.015em;
  /* letter-spacing steps used by uppercase labels/eyebrows across the site —
     collects six previously-inlined values (0.01–0.08em) onto one scale. */
  --tl-tracking-1: 0.01em;
  --tl-tracking-2: 0.02em;
  --tl-tracking-3: 0.03em;
  --tl-tracking-4: 0.05em;
  --tl-tracking-5: 0.06em;
  --tl-tracking-6: 0.08em;

  /* font-weight scale — the four weights actually used anywhere on the site */
  --tl-fw-regular: 400;
  --tl-fw-medium: 500;
  --tl-fw-semibold: 600;
  --tl-fw-bold: 700;

  /* line-height scale */
  --tl-lh-none: 1;
  --tl-lh-heading: 1.08;
  --tl-lh-snug: 1.2;
  --tl-lh-compact: 1.3;
  --tl-lh-body: 1.5;

  /* spacing scale (rem) — generous, apple-scale section rhythm. The -0-5/
     -1-5/-2-5 half-steps below exist because 2px/6px/10px gaps are common
     enough (form-control internals, chip/badge padding, icon gaps) to
     deserve their own tokens rather than bypassing the scale as raw px. */
  --tl-sp-0-5: 0.125rem;  /* 2px */
  --tl-sp-1: 0.25rem;     /* 4px */
  --tl-sp-1-5: 0.375rem;  /* 6px */
  --tl-sp-2: 0.5rem;      /* 8px */
  --tl-sp-2-5: 0.625rem;  /* 10px */
  --tl-sp-3: 0.75rem;     /* 12px */
  --tl-sp-4: 1rem;        /* 16px */
  --tl-sp-5: 1.5rem;      /* 24px */
  --tl-sp-6: 2.5rem;      /* 40px */
  --tl-sp-7: 4rem;        /* 64px */
  --tl-sp-8: 6.5rem;      /* 104px */
  --tl-sp-9: 9rem;        /* 144px */

  --tl-radius-xs: 4px;
  --tl-radius-sm: 10px;
  --tl-radius-md: 18px;
  --tl-radius-lg: 28px;
  --tl-radius-pill: 999px;

  --tl-max-width: 1180px;
  --tl-header-h: 52px;

  --tl-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /*
   * MOTION DURATIONS — the one place a duration is a number. js/motion.js
   * reads these back out via getComputedStyle() instead of carrying its own
   * separate set of numbers, so CSS transitions and anime.js animations can
   * never drift apart the way the old two-independent-lists setup let them.
   * The first three are micro-interactions (hover/focus/press, CSS
   * transitions); the rest are anime.js entrance/chart motion.
   */
  --tl-dur-1: 80ms;    /* press feedback, instant micro-nudges */
  --tl-dur-2: 150ms;   /* hover/focus colour & border transitions */
  --tl-dur-3: 200ms;   /* base UI transitions (mobile nav open/close) */
  --tl-dur-4: 240ms;   /* page-swap fade */
  --tl-dur-5: 280ms;   /* calendar chip in/out */
  --tl-dur-6: 340ms;   /* staggered list entrances */
  --tl-dur-7: 380ms;   /* hero meta stagger */
  --tl-dur-8: 420ms;   /* hero name / tiles / logo fallback fade */
  --tl-dur-9: 460ms;   /* donut chart entrance */
  --tl-dur-10: 480ms;  /* bar chart entrance */
  --tl-dur-11: 750ms;  /* logo intro trace (rate matched to the brand video) */

  /*
   * FOCUS RING — one definition, reused everywhere a keyboard focus
   * indicator is drawn with CSS (outline) or, where outline can't be used
   * (an element already using box-shadow for something else), the shadow
   * form below. SVG focus states (the floor-plan pieces) necessarily use a
   * stroke instead — outline/box-shadow don't apply meaningfully to
   * arbitrary SVG shapes — but still pull their colour from --tl-accent so
   * the same brand colour marks focus everywhere.
   */
  --tl-focus-ring-width: 2px;
  --tl-focus-ring-offset: 3px;
  --tl-focus-ring-color: var(--tl-accent);
  --tl-focus-ring-shadow: 0 0 0 2px color-mix(in srgb, var(--tl-accent) 35%, transparent);

  /*
   * Z-INDEX SCALE — every stacking layer on the site, ordered. Fixes a real
   * bug: the search-results panel used to sit ABOVE the lightbox (250 vs
   * 200), so an open lightbox could be obscured by a stale results panel.
   */
  --tl-z-header: 100;
  --tl-z-search-results: 150;
  --tl-z-lightbox: 200;
  --tl-z-skip-link: 300;  /* highest — must always be reachable by keyboard */

  /*
   * BREAKPOINTS — documentation tokens, not literal @media inputs: CSS
   * custom properties cannot be substituted into a media-query condition, so
   * every @media rule below still hardcodes its pixel value. Keep the six
   * numbers actually in use here as the canonical list — a new breakpoint
   * should reuse one of these before a seventh ad-hoc width gets added.
   */
  --tl-bp-xs: 520px;   /* base.css   — search field collapses further */
  --tl-bp-sm: 640px;   /* components.css — hero name input goes full-width */
  --tl-bp-md: 700px;   /* pages.css  — cost/calendar/venue grids stack */
  --tl-bp-lg: 780px;   /* floorplan.css — editor sidebar drops under canvas */
  --tl-bp-xl: 860px;   /* base.css   — nav collapses to the mobile panel */
  --tl-bp-2xl: 900px;  /* pages.css  — cost charts stack to one column */

  /* ---- dark palette (bare :root — this build is dark-first) ---- */
  --tl-bg: #000000;
  --tl-bg-raised: #101014;
  --tl-bg-raised-2: #17171d;
  --tl-bg-sunken: #000000;
  --tl-border: #26262e;
  --tl-border-strong: #38383f;
  --tl-text: #f5f5f7;
  --tl-text-dim: #a1a1a8;
  --tl-text-faint: #86868e;
  --tl-accent: var(--tl-light-blue);
  --tl-accent-contrast: #001322;
  --tl-link: var(--tl-light-blue);
  --tl-nav-bg: rgba(10, 10, 14, 0.72);

  --tl-ok: #4fd899;
  --tl-ok-bg: rgba(79, 216, 153, 0.12);
  --tl-warn: #f0b84b;
  --tl-warn-bg: rgba(240, 184, 75, 0.12);
  --tl-danger: #ff6b6b;
  --tl-danger-bg: rgba(255, 107, 107, 0.12);
  --tl-info: var(--tl-turquoise);
  --tl-info-bg: rgba(0, 151, 178, 0.16);
  --tl-muted-bg: #1c1c22;

  --tl-cat-worst: #ff6b6b;
  --tl-cat-mid: #f0b84b;
  --tl-cat-best: #4fd899;

  /*
   * ELEVATION SCALE — three steps. sm lifts small controls (buttons, the
   * floor-plan card); md lifts floating overlays (search results, the
   * mobile nav panel); lg is the heaviest, for the mobile nav's full-panel
   * overlay. Two further box-shadows stay INLINE deliberately, because
   * they aren't elevation at all: .fp-tab.is-active's is a flat active-tab
   * underline, and the focus ring above is its own token.
   */
  --tl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --tl-shadow-md: 0 20px 60px rgba(0, 0, 0, 0.55);
  --tl-shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.6);

  /* AMBIENT PAGE BACKGROUND — dark: true black falling to Deep Blue.
     This is the ground the page sits on, NOT a wash over content: every card,
     panel, table and chart container keeps its own solid --tl-bg-raised /
     --tl-bg-sunken surface, so text contrast is unchanged anywhere.
     The 115% end stop deliberately pushes full-strength #1800ad just past the
     visible corner, so the brand hue reads as a glow rather than a colour
     block — restraint over a loud wash. */
  --tl-bg-gradient: linear-gradient(155deg, #000000 0%, #000000 35%, #0a0340 75%, #1800ad 115%);

  /* Native form controls, scrollbars and the like should render in the
     dark UA chrome by default — without this they show up as light-on-dark
     surprises (e.g. a white <select> popup) inside this dark-first theme. */
  color-scheme: dark;

  /*
   * VISUAL-REDESIGN TOKENS — the Aceternity-style effects layer (css/effects.js,
   * css/effects.css) reads every number it needs from here rather than
   * inventing its own, same discipline as the motion/elevation/z-index scales
   * above. Nothing below changes layout — spotlight/tilt/glare/gradient-border
   * are all transform/opacity/background-position, so these are sizes and
   * speeds, not new spacing.
   */
  --tl-spotlight-size: 620px;               /* radial-gradient diameter that follows the cursor */
  --tl-spotlight-opacity: 0.16;              /* dark: the glow reads against near-black, so it stays subtle */
  --tl-tilt-max: 8deg;                       /* max rotateX/rotateY a tilt card reaches at the pointer's edge */
  --tl-glare-opacity: 0.22;
  --tl-noise-opacity: 0.05;
  --tl-grid-opacity: 0.5;
  --tl-grid-size: 34px;
  --tl-border-glow-width: 1.5px;             /* thickness of an animated gradient border */
  --tl-dur-spin-1: 3200ms;                   /* moving-border / gradient-border rotation speeds — */
  --tl-dur-spin-2: 5200ms;                   /* slow and deliberate, never a spinner-fast loop */
  --tl-lens-zoom: 2.2;                       /* lightbox lens magnification factor */
}

/* explicit LIGHT override — only reachable via the theme toggle, since this
   build defaults to dark regardless of system preference */
:root[data-theme="light"] {
  --tl-bg: #ffffff;
  --tl-bg-raised: #f7f7f9;
  --tl-bg-raised-2: #efeff3;
  --tl-bg-sunken: #ffffff;
  --tl-border: #e2e2e6;
  --tl-border-strong: #cfcfd6;
  --tl-text: #141417;
  --tl-text-dim: #57575f;
  /* was #86868b (3.6:1 on white — fails AA); #6b6b72 clears 4.5:1 against
     every surface this colour actually sits on (white, both raised tones,
     and the muted badge background), while staying visibly lighter than
     --tl-text-dim. */
  --tl-text-faint: #6b6b72;
  --tl-accent: var(--tl-deep-blue);
  --tl-accent-contrast: #ffffff;
  --tl-link: var(--tl-deep-blue);
  --tl-nav-bg: rgba(255, 255, 255, 0.78);

  --tl-ok: #1c7a4d;
  --tl-ok-bg: #e4f5eb;
  --tl-warn: #93590a;
  --tl-warn-bg: #fbf0dc;
  --tl-danger: #b3261e;
  --tl-danger-bg: #fbe6e4;
  /* was var(--tl-turquoise) (#0097b2), i.e. never re-tuned for light at all —
     #0097b2 on the light info background is ~3.1:1 and fails AA. #00707f
     clears 4.5:1+ and still reads as the same teal family. */
  --tl-info: #00707f;
  --tl-info-bg: #e2f5f8;
  --tl-muted-bg: #eceef2;

  --tl-cat-worst: #b3261e;
  --tl-cat-mid: #93590a;
  --tl-cat-best: #1c7a4d;

  --tl-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --tl-shadow-md: 0 16px 48px rgba(15, 23, 42, 0.12);
  --tl-shadow-lg: 0 24px 64px rgba(15, 23, 42, 0.16);

  /* light: white falling to Light Blue, same 115% trick so the corner glows
     rather than turning into a solid blue panel */
  --tl-bg-gradient: linear-gradient(155deg, #ffffff 0%, #ffffff 35%, #d8efff 75%, #38b6ff 115%);

  color-scheme: light;

  /* the cursor spotlight and noise texture both read as noticeably stronger
     against a light ground than against near-black, so both are turned down
     here rather than let the effect layer hardcode a single intensity */
  --tl-spotlight-opacity: 0.10;
  --tl-glare-opacity: 0.14;
  --tl-noise-opacity: 0.035;
  --tl-grid-opacity: 0.6;
}