/* =========================================================
   Live design tokens
   ---------------------------------------------------------
   Two levels:
   - primitives (--p-*): raw values. Only this file and styles.css
     read them.
   - semantic tokens: what components use. Live's own look sets them
     here; an event style overrides them in styles.css.
   See docs/product/05-design-system.md.
   ========================================================= */

@layer tokens, base, layout, components, styles, utilities;

@layer tokens {
  :root {
    /* ---- Primitives: palette ------------------------------------ */
    --p-violet: #6d1de8;
    --p-violet-deep: #5716c2;
    --p-violet-soft: #f5efff;
    --p-violet-line: #e7dcfb;
    --p-violet-tint: #e9dcff;
    --p-indigo: #4b14d8;
    --p-magenta: #e621b8;

    --p-ink: #1d1933;
    --p-ink-2: #322d4c;
    --p-text: #423d5d;
    --p-muted: #6f6a88;
    --p-faint: #a09bb1;

    --p-canvas: #fafafd;
    --p-canvas-2: #f3f2f8;
    --p-surface: #ffffff;
    --p-line: #eceaf2;
    --p-line-strong: #e0dde9;

    --p-ok: #0f9d6e;
    --p-ok-soft: #e8f8f2;
    --p-warn: #b45309;
    --p-warn-soft: #fdf4e6;
    --p-bad: #dc2626;
    --p-bad-soft: #fdeded;

    /* ---- Primitives: type faces ---------------------------------- */
    --p-face-instrument: "Instrument Serif", "Noto Serif Display", Georgia, serif;
    --p-face-noto-display: "Noto Serif Display", Georgia, serif;
    --p-face-franklin: "Libre Franklin", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p-face-bricolage: "Bricolage Grotesque", "Noto Sans", "Arial Black", system-ui, sans-serif;
    --p-face-noto-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p-face-familjen: "Familjen Grotesk", "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p-face-plex-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

    /* ---- Primitives: scales -------------------------------------- */
    --p-space-1: 0.25rem;
    --p-space-2: 0.5rem;
    --p-space-3: 0.75rem;
    --p-space-4: 1rem;
    --p-space-5: 1.25rem;
    --p-space-6: 1.5rem;
    --p-space-7: 2rem;
    --p-space-8: 2.5rem;
    --p-space-9: 3.5rem;
    --p-space-10: 4.5rem;

    --p-radius-xs: 8px;
    --p-radius-sm: 12px;
    --p-radius-md: 16px;
    --p-radius-lg: 20px;
    --p-radius-pill: 999px;

    --p-shadow-sm: 0 1px 2px rgba(29, 25, 51, 0.05), 0 2px 6px -1px rgba(29, 25, 51, 0.06);
    --p-shadow-md: 0 1px 2px rgba(29, 25, 51, 0.04), 0 14px 34px -12px rgba(29, 25, 51, 0.16);
    --p-shadow-brand: 0 1px 2px rgba(109, 29, 232, 0.08), 0 10px 26px -8px rgba(109, 29, 232, 0.35);

    --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --p-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --p-duration-fast: 150ms;
    --p-duration: 250ms;
    --p-duration-slow: 500ms;

    /* ---- Semantic: colour ---------------------------------------- */
    --color-brand: var(--p-violet);
    --color-brand-hover: var(--p-violet-deep);
    --color-brand-soft: var(--p-violet-soft);
    --color-brand-line: var(--p-violet-line);
    --color-on-brand: #ffffff;
    --color-accent: var(--p-magenta);

    --color-heading: var(--p-ink);
    --color-text: var(--p-text);
    --color-muted: var(--p-muted);
    --color-faint: var(--p-faint);

    --color-page: var(--p-canvas);
    --color-sunken: var(--p-canvas-2);
    --color-surface: var(--p-surface);
    --color-line: var(--p-line);
    --color-line-strong: var(--p-line-strong);
    --color-inverse: var(--p-ink);
    --color-on-inverse: var(--p-canvas);

    --color-ok: var(--p-ok);
    --color-ok-soft: var(--p-ok-soft);
    --color-warn: var(--p-warn);
    --color-warn-soft: var(--p-warn-soft);
    --color-bad: var(--p-bad);
    --color-bad-soft: var(--p-bad-soft);

    /* ---- Semantic: type ------------------------------------------ */
    --font-display: var(--p-face-instrument);
    /* Used for a headline the display face cannot render (DS8). */
    --font-display-safe: var(--p-face-noto-display);
    --font-body: var(--p-face-franklin);
    --font-data: var(--p-face-franklin);

    --title-weight: 400;
    --title-weight-safe: 400;
    /* Tracking is a function of size, not a constant: the bigger the type, the
       more air there is between letters to take out. This is the value at
       --text-3xl, and .ui-title--lg and --md scale it from here, so a style
       that sets its own tracking still gets the progression. Measured against
       the same idea elsewhere: -0.025em at 56px easing to nothing by 18px. */
    --title-tracking-safe: -0.015em;
    --title-tracking: -0.02em;
    --title-leading: 1.02;
    --title-case: none;
    --title-style-accent: italic;

    --heading-weight: 400;
    --heading-tracking: -0.01em;

    --label-size: 0.8125rem;
    /* A label is told apart from the thing under it by colour, not by weight.
       At 600 every chip and field label was emphasising itself as well as the
       value it introduces, which is the same word said twice. */
    --label-weight: 400;
    --label-case: none;
    --label-tracking: 0;

    --data-weight: 600;
    --data-figures: tabular-nums;

    /* Fluid type: phone first, growing to desktop. */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-2xl: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    --text-3xl: clamp(2.125rem, 1.6rem + 2vw, 3rem);
    --text-4xl: clamp(2.625rem, 1.8rem + 3.4vw, 4.25rem);

    /* ---- Semantic: shape ----------------------------------------- */
    --radius-card: var(--p-radius-lg);
    --radius-inner: var(--p-radius-md);
    --radius-control: var(--p-radius-pill);
    --radius-field: var(--p-radius-sm);
    --radius-chip: var(--p-radius-pill);

    --shadow-card: none;
    --shadow-raised: var(--p-shadow-md);
    --shadow-action: var(--p-shadow-brand);

    --control-height: 2.75rem;
    --control-height-lg: 3.125rem;

    /* ---- Semantic: cover ----------------------------------------- */
    --cover-ink: var(--p-canvas);
    --cover-eyebrow: var(--p-violet-tint);
    --cover-pattern: none;
    --cover-pattern-size: auto;
    --cover-title-weight: 400;
    --cover-title-weight-safe: 300;
    --cover-title-style: italic;
    --cover-title-case: none;
    --cover-title-tracking: 0;
    --cover-radius: var(--p-radius-lg);

    /* ---- Semantic: space and motion ------------------------------- */
    --space-gutter: var(--p-space-5);
    /* A section is the largest unit a page has, so it gets the largest step.
       At 40px it was only two chips' worth more than the gap inside a card,
       which is why one section ran into the next. */
    --space-section: var(--p-space-10);
    --duration: var(--p-duration);
    --ease: var(--p-ease-out);
  }
  /* Derived tokens: defined from other tokens, so they are recomputed on
     every element that sets an event style. Declared on :root only, a
     var() would resolve once at the root and a style changing
     --font-body would leave labels in Live's face. */
  :root,
  [data-style] {
    --heading-font: var(--font-display);
    --label-font: var(--font-body);
    --label-color: var(--color-muted);
    /* A label that is a section's heading rather than a value's: same face,
       same size, same weight, and only the colour says which it is. */
    --label-strong-color: var(--color-heading);
    --border-card: 1px solid var(--color-line);
    --divider: 1px solid var(--color-line);
    --perforation: 1px solid var(--color-line);
    --cover-bg: var(--color-brand);
    --cover-title-font: var(--font-display);
  }
}