/*!
 * Holonova design system v3: type scale, radii and motion.
 *
 * Load order: holonova-fonts.css -> holonova-tokens.css (v2) -> this file.
 *
 * What v3 changes: the type scale, the radii and the motion values, taken from
 * omniplace.vercel.app (measured 29 Sep 2026: computed styles on the live page
 * and constants in its script bundles). What v3 keeps: every colour and both
 * font families from v2 (Archivo, JetBrains Mono), unchanged. Nothing in this
 * file defines a colour or a font family.
 *
 * Spec, provenance and the logo rules: docs/design-system-v3.md.
 *
 * Themes: the colour mappings are v2's [data-theme="dark"] and [data-theme="light"].
 * A head script sets data-theme from prefers-color-scheme before paint; dark is the
 * default and the fallback without scripts (decision of 29 Sep 2026).
 */

:root {
  /* ---------------------------------------------------------------
     TYPE SCALE (families stay v2: --font-sans Archivo, --font-mono JetBrains Mono)
     --------------------------------------------------------------- */

  /* Hero word: NOT used on the website (house rule 6, 29 Sep 2026); decks and posters only,
     one or two words, never a sentence, never the brand name in type. */
  --t-hero-size: clamp(5.5rem, 17.5vw, 17.5rem);
  --t-hero-leading: .9;
  --t-hero-tracking: -.05em;
  --t-hero-weight: 500;

  /* Section heading (h2). Steps up at 768px and 1024px, see the rules below. */
  --t-h2-size: 2.25rem;
  --t-h2-leading: 1.02;
  --t-h2-tracking: -.035em;
  --t-h2-weight: 500;

  /* Statement: pains, answer headings, dialog title. */
  --t-statement-size: 1.5rem;
  --t-statement-leading: 1.33;
  --t-statement-tracking: -.015em;
  --t-statement-weight: 500;

  /* Card and item title (h3). */
  --t-h3-size: 17px;
  --t-h3-leading: 1.5;
  --t-h3-tracking: -.01em;
  --t-h3-weight: 500;

  /* Body copy. */
  --t-body-size: 16px;
  --t-body-leading: 1.625;   /* 26px */

  /* Small body, lists inside cards. */
  --t-small-size: 13.5px;
  --t-small-leading: 1.6;

  /* Navigation links. */
  --t-nav-size: 14.5px;
  --t-nav-leading: 1.5;

  /* Buttons. */
  --t-button-size: 15.5px;
  --t-button-tracking: -.01em;
  --t-button-weight: 500;
  --button-height: 56px;
  --button-pad-x: 28px;
  --button-pad-end-with-icon: 8px;

  /* Labels, set in mono, uppercase. Colour must pass AA at 11px:
     use --color-text-secondary or the orange signal, never faint text. */
  --t-label-size: 11px;
  --t-label-leading: 1.5;
  --t-label-tracking: .22em;

  /* Chips and status tags, mono, uppercase. */
  --t-chip-size: 10.5px;
  --t-chip-tracking: .16em;

  /* ---------------------------------------------------------------
     RADII
     --------------------------------------------------------------- */
  --radius-button: 999px;        /* buttons, icon buttons */
  --radius-chip: 999px;          /* chips, status tags, pills */
  --radius-toggle: 6px;          /* small toggles, such as the language switch */
  --radius-tile-sm: 12px;        /* small tiles */
  --radius-tile: 16px;           /* icon tiles (48px square); one third of the side */
  --radius-card: 20px;           /* offer and product cards */
  --radius-card-lg: 24px;        /* stat cards, "ways in" cards */
  --radius-panel: 28px;          /* hero and pinned panels; 32px from 768px */
  --radius-dialog: 28px;         /* dialogs */
  --radius-media: 9px;           /* screen frames around product views; 13px from 640px */
  --radius-tab: 0 0 26px 26px;   /* the floating navigation tab hanging from the top edge */
  --tab-height: 64px;

  /* v2 names, remapped so older components follow v3. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------
     MOTION
     --------------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* entrances, transforms (unchanged from v2) */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);  /* colour, border and surface hovers */

  --duration-instant: 150ms;   /* small controls */
  --duration-hover: 200ms;     /* button and link hover (amended 29 Sep 2026) */
  --duration-press: 160ms;     /* return from the pressed state */
  --press-scale: .97;          /* pressed buttons */
  --duration-fast: 300ms;      /* header slide; never a hover (hovers use --duration-hover) */
  --duration-base: 500ms;      /* card border and surface hover, transforms */
  --duration-slow: 700ms;      /* underline sweeps, larger transforms */
  --duration-reveal: 800ms;    /* scroll reveal, header entrance */
  --duration-rise: 1000ms;     /* word rise and logo rise */
  --duration-dialog: 600ms;    /* dialog panel */
  --duration-backdrop: 350ms;  /* dialog backdrop */
  --duration-item: 750ms;      /* staggered list items */
  --duration-bar: 900ms;       /* bars and meters growing in */
  --duration-hero-visual: 1800ms;

  --stagger-step: 70ms;        /* between words, items, bars, logo circles */
  --reveal-distance: 24px;
  --item-distance: 28px;
  --dialog-distance: 28px;
  --dialog-scale: .97;
  --hero-visual-scale: .92;
  --header-distance: -12px;
  --header-delay: 100ms;
  --bar-start-scale: .15;
  --step-distance: 8px;        /* explainer step-throughs */
  --duration-step: 200ms;      /* explainer step-throughs */

}

/* h2 steps */
@media (min-width: 768px)  { :root { --t-h2-size: 3rem; --radius-panel: 32px; } }
@media (min-width: 1024px) { :root { --t-h2-size: 3.25rem; } }
@media (min-width: 640px)  { :root { --radius-media: 13px; } }

/* Reduced motion: no travel, no scale, no loop. Things appear. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-distance: 0px; --item-distance: 0px; --dialog-distance: 0px;
    --dialog-scale: 1; --hero-visual-scale: 1; --header-distance: 0px; --bar-start-scale: 1;
    --duration-reveal: 150ms; --duration-rise: 150ms; --duration-item: 150ms;
    --duration-dialog: 150ms; --duration-bar: 150ms; --duration-hero-visual: 150ms;
    --stagger-step: 0ms; --press-scale: 1;
    --step-distance: 0px; --duration-step: 150ms;
  }
}