/* ============================================================
   Celli — Design Tokens 1.0.0
   Design system: venture:celli@1.0.0
   Published at https://ds-celli.pages.sharelabs.ai/tokens.css
   Derived from the Share Ventures Design System
   (https://design.sharelabs.ai/latest/tokens/tokens.css): the custom-property
   NAMES are identical, so Share Ventures components and sv-base.css work
   unchanged. The VALUES are Celli's own brand. Replace every value
   marked BRAND; keep the scales unless DESIGN.md says otherwise.
   Pages link this file and use var(--sv-…) for every color and font.
   ============================================================ */

:root {
  /* ---------------------------------------------------------
     COLOR / PRIMITIVES — BRAND
     The names are roles, not hues: --sv-green is this venture's
     single action color, --sv-home-bg its page background,
     --sv-gray-* its neutral ramp (light → x-dark).
     --------------------------------------------------------- */
  --sv-black: #0a0a0a;
  --sv-white: #ffffff;
  --sv-off-white: #f5f6f8;      /* BRAND: sunken / print-leaning surface */
  --sv-home-bg: #ffffff;        /* BRAND: default page background */
  --sv-gray-light: #e8eaee;     /* BRAND: hairlines on light */
  --sv-gray-mid: #8b909a;       /* BRAND: large/decorative text only */
  --sv-gray-dark: #565a63;      /* BRAND: secondary text, 4.5:1+ on --sv-home-bg */
  --sv-gray-xdark: #1a1a1a;     /* BRAND: raised surface on dark */
  --sv-green: #0a0a0a;          /* BRAND: the action and state color on light surfaces */
  --sv-green-dark: #ffffff;     /* BRAND: its pair on dark surfaces */

  /* ---------------------------------------------------------
     COLOR / SEMANTIC (light surfaces — default)
     Map roles to primitives; pages use these, not the primitives.
     --------------------------------------------------------- */
  --sv-surface: var(--sv-home-bg);
  --sv-surface-raised: var(--sv-white);
  --sv-surface-sunken: var(--sv-off-white);
  --sv-ink: var(--sv-black);
  --sv-ink-secondary: var(--sv-gray-dark);
  --sv-ink-tertiary: var(--sv-gray-mid);
  --sv-hairline: var(--sv-gray-light);
  --sv-accent: var(--sv-green);
  --sv-accent-ink: var(--sv-white);       /* BRAND: text on the accent, AA contrast */
  --sv-focus: var(--sv-ink);               /* neutral focus ring; keep neutral */


  /* ---------------------------------------------------------
     CELLI ADDITIONS (1.0.0)
     --------------------------------------------------------- */
  --celli-hairline-strong: #d7dae0;  /* input borders, secondary button edge */
  --celli-live: #16a34a;             /* "live / online" state dot only; never text, never decoration */
  --celli-radius-pill: 999px;        /* buttons, chips, badges */
  --celli-radius-sm: 10px;           /* avatars, small tiles */

  /* ---------------------------------------------------------
     TYPOGRAPHY — BRAND family; the scale may stay
     --------------------------------------------------------- */
  --sv-font-sans: var(--font-aeonik, "Aeonik Pro"), Arial, "Helvetica Neue", Helvetica, sans-serif; /* BRAND: Share default Aeonik Pro (pages link share-ventures tokens/fonts.css) or the venture's own licensed face first; Arial is the failure fallback only */

  --sv-text-display: clamp(3rem, 8vw, 6rem);
  --sv-text-h1: clamp(2.5rem, 5vw, 3.5rem);
  --sv-text-h2: clamp(2rem, 3.5vw, 2.5rem);
  --sv-text-h3: 1.75rem;
  --sv-text-h4: 1.25rem;
  --sv-text-intro: 1.5rem;
  --sv-text-body: 1.125rem;
  --sv-text-small: 0.9375rem;
  --sv-text-caption: 0.8125rem;
  --sv-text-stat: clamp(4rem, 10vw, 8rem);

  --sv-leading-display: 1.02;
  --sv-leading-heading: 1.1;
  --sv-leading-intro: 1.35;
  --sv-leading-body: 1.6;

  --sv-tracking-display: -0.02em;
  --sv-tracking-heading: -0.01em;
  --sv-tracking-body: 0;
  --sv-tracking-caps: 0.04em;

  /* ---------------------------------------------------------
     SPACE (4px base — use steps, never arbitrary values)
     --------------------------------------------------------- */
  --sv-space-1: 0.25rem;
  --sv-space-2: 0.5rem;
  --sv-space-3: 0.75rem;
  --sv-space-4: 1rem;
  --sv-space-6: 1.5rem;
  --sv-space-8: 2rem;
  --sv-space-12: 3rem;
  --sv-space-16: 4rem;
  --sv-space-24: 6rem;
  --sv-space-32: 8rem;
  --sv-space-48: 12rem;

  /* ---------------------------------------------------------
     LAYOUT
     --------------------------------------------------------- */
  --sv-container: 90rem;
  --sv-gutter: clamp(1.25rem, 4vw, 4rem);
  --sv-rail: 18rem;
  --sv-radius: 16px;               /* BRAND: corner radius */
  --sv-hairline-w: 1px;

  /* ---------------------------------------------------------
     MOTION
     --------------------------------------------------------- */
  --sv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --sv-ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --sv-ease-linear: linear;

  --sv-dur-instant: 100ms;
  --sv-dur-fast: 200ms;
  --sv-dur-base: 300ms;
  --sv-dur-slow: 600ms;
  --sv-dur-cine: 1000ms;

  --sv-stagger: 80ms;
  --sv-reveal-distance: 24px;

  /* ---------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------- */
  --sv-z-nav: 100;
  --sv-z-overlay: 200;
  --sv-z-modal: 300;

  /* ---------------------------------------------------------
     SHARED MATERIAL: Liquid Glass, product-mark key and data
     palette. Keep these Share Ventures values unless DESIGN.md
     records a measured reason; the tint alphas are AA floors.
     --------------------------------------------------------- */
  --sv-glass-blur-thin: 8px;
  --sv-glass-blur-regular: 18px;
  --sv-glass-blur-thick: 32px;
  --sv-glass-clear-blur-thin: 0.5px;
  --sv-glass-clear-blur-regular: 1px;
  --sv-glass-clear-blur-thick: 2px;
  --sv-glass-saturate: 180%;
  --sv-glass-tint-thin: rgb(255 255 255 / 0.55);
  --sv-glass-tint-regular: rgb(255 255 255 / 0.72);
  --sv-glass-tint-thick: rgb(255 255 255 / 0.86);
  --sv-glass-clear-thin: rgb(255 255 255 / 0.12);
  --sv-glass-clear-regular: rgb(255 255 255 / 0.20);
  --sv-glass-clear-thick: rgb(255 255 255 / 0.32);
  --sv-glass-edge: rgb(255 255 255 / 0.7);
  --sv-glass-edge-shade: rgb(0 0 0 / 0.12);
  --sv-glass-specular: rgb(255 255 255 / 0.9);
  --sv-glass-bevel: 1.5px;
  --sv-glass-lensing: 4px;
  --sv-glass-radius-thin: 20px;
  --sv-glass-radius-regular: 28px;
  --sv-glass-radius-thick: 36px;
  --sv-glass-ink: var(--sv-black);
  --sv-glass-ink-secondary: var(--sv-gray-xdark);
  --sv-wordmark-os-weight: 400;
  --sv-wordmark-os-gap: 0.1em;
  --sv-wordmark-os-pad-x: 0.2em;
  --sv-wordmark-os-pad-bottom: 0.19em;
  --sv-wordmark-os-line: 0.68em;
  --sv-wordmark-os-radius: 0.26em;
  --sv-wordmark-os-fill: rgb(0 0 0 / 0.035);
  --sv-wordmark-os-edge: rgb(0 0 0 / 0.2);
  --sv-wordmark-os-bevel: rgb(255 255 255 / 0.75);
  --sv-wordmark-os-specular: rgb(255 255 255 / 1);
  --sv-wordmark-os-shade: rgb(0 0 0 / 0.1);
  --sv-wordmark-os-sheen: rgb(255 255 255 / 0.9);
  --sv-wordmark-os-media-fill: rgb(255 255 255 / 0.55);
  --sv-wordmark-os-media-edge: rgb(255 255 255 / 0.8);
  --sv-data-1: var(--sv-black);
  --sv-data-2: #2f5fd0;
  --sv-data-3: #0e7c86;
  --sv-data-4: #6e56cf;
  --sv-data-5: #b5651d;
  --sv-data-neutral: var(--sv-gray-dark);
  --sv-data-track: var(--sv-gray-light);
  --sv-data-grid: var(--sv-gray-light);
}

/* Dark-surface context: apply .sv-dark to any section on a dark background. */
.sv-dark {
  color: var(--sv-ink);
  background: var(--sv-surface);
  --sv-surface: var(--sv-black);
  --sv-surface-raised: var(--sv-gray-xdark);
  --sv-surface-sunken: var(--sv-black);
  --sv-ink: var(--sv-white);
  --sv-ink-secondary: var(--sv-gray-light);
  --sv-ink-tertiary: var(--sv-gray-mid);
  --sv-hairline: #2a2a2a;
  --sv-accent: var(--sv-green-dark);
  --sv-accent-ink: var(--sv-black);
  --sv-focus: var(--sv-white);

  /* Shared material over dark (see :root). */
  --sv-glass-tint-thin: rgb(0 0 0 / 0.45);
  --sv-glass-tint-regular: rgb(0 0 0 / 0.62);
  --sv-glass-tint-thick: rgb(0 0 0 / 0.8);
  --sv-glass-clear-thin: rgb(0 0 0 / 0.16);
  --sv-glass-clear-regular: rgb(0 0 0 / 0.26);
  --sv-glass-clear-thick: rgb(0 0 0 / 0.40);
  --sv-glass-edge: rgb(255 255 255 / 0.28);
  --sv-glass-edge-shade: rgb(0 0 0 / 0.5);
  --sv-glass-specular: rgb(255 255 255 / 0.45);
  --sv-glass-ink: var(--sv-white);
  --sv-glass-ink-secondary: var(--sv-gray-light);
  --sv-wordmark-os-fill: rgb(255 255 255 / 0.1);
  --sv-wordmark-os-edge: rgb(255 255 255 / 0.32);
  --sv-wordmark-os-bevel: rgb(255 255 255 / 0.08);
  --sv-wordmark-os-specular: rgb(255 255 255 / 0.55);
  --sv-wordmark-os-shade: rgb(0 0 0 / 0.6);
  --sv-wordmark-os-sheen: rgb(255 255 255 / 0.18);
  --sv-wordmark-os-media-fill: rgb(0 0 0 / 0.45);
  --sv-wordmark-os-media-edge: rgb(255 255 255 / 0.34);
  --sv-data-1: var(--sv-white);
  --sv-data-2: #7ea6ff;
  --sv-data-3: #3fc1c9;
  --sv-data-4: #ad9bff;
  --sv-data-5: #f0a650;
  --sv-data-neutral: var(--sv-gray-light);
  --sv-data-track: var(--sv-gray-xdark);
  --sv-data-grid: var(--sv-gray-dark);
}

/* Reduced motion: opacity-only, near-instant. Non-negotiable. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sv-dur-instant: 1ms;
    --sv-dur-fast: 1ms;
    --sv-dur-base: 1ms;
    --sv-dur-slow: 1ms;
    --sv-dur-cine: 1ms;
    --sv-reveal-distance: 0px;
  }
}