/* ============================================================
   Design tokens — PabloSoft studio site
   Dark-luxury / glass direction. All color in oklch.
   ============================================================ */

:root {
  /* --- Surfaces ------------------------------------------- */
  --bg-base: oklch(13% 0.02 270);
  --bg-deep: oklch(9% 0.018 270);
  --bg-raise: oklch(17% 0.022 270);

  --surface-glass: oklch(100% 0 0 / 0.045);
  --surface-glass-strong: oklch(100% 0 0 / 0.08);
  --surface-border: oklch(100% 0 0 / 0.1);
  --surface-border-strong: oklch(100% 0 0 / 0.18);

  /* --- Text ----------------------------------------------- */
  --text-strong: oklch(97% 0.008 270);
  --text: oklch(88% 0.012 270);
  --text-muted: oklch(70% 0.018 270);
  --text-faint: oklch(56% 0.02 270);

  /* --- Brand signature gradient --------------------------- */
  --brand-1: oklch(64% 0.21 280);   /* violet  */
  --brand-2: oklch(62% 0.2 305);    /* magenta */
  --brand-3: oklch(74% 0.15 210);   /* cyan    */
  --brand-glow: oklch(64% 0.21 280 / 0.5);

  --gradient-brand: linear-gradient(
    100deg,
    var(--brand-1) 0%,
    var(--brand-2) 45%,
    var(--brand-3) 100%
  );
  --gradient-text: linear-gradient(
    100deg,
    oklch(80% 0.14 285) 0%,
    oklch(78% 0.16 320) 50%,
    oklch(85% 0.12 205) 100%
  );
  /* Lightened gradient for surfaces that carry dark text (buttons, CTA).
     Dark text on these light stops clears WCAG AA across the whole sweep. */
  --gradient-bright: linear-gradient(
    100deg,
    oklch(83% 0.12 285) 0%,
    oklch(82% 0.13 322) 48%,
    oklch(88% 0.1 205) 100%
  );
  --on-bright: oklch(20% 0.03 285);

  /* --- Per-app accents (tuned to each real icon) ---------- */
  --app-qr: oklch(62% 0.16 250);      /* QR Scanner — blue      */
  --app-calc: oklch(66% 0.16 265);    /* Calcio — indigo blue   */
  --app-spinner: oklch(68% 0.21 345); /* Spinner — magenta      */
  --app-level: oklch(74% 0.18 150);   /* Spirit Level — green   */
  --app-flash: oklch(80% 0.16 80);    /* Flashlight — amber     */
  --app-convert: oklch(70% 0.13 185); /* Unit Converter — teal  */
  --app-sound: oklch(64% 0.19 25);    /* Sound Meter — coral    */

  /* --- Type ----------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --text-hero: clamp(2.9rem, 1rem + 8vw, 7.5rem);
  --text-h2: clamp(2rem, 1rem + 3.6vw, 3.6rem);
  --text-h3: clamp(1.3rem, 1rem + 1.1vw, 1.7rem);
  --text-lead: clamp(1.05rem, 0.95rem + 0.55vw, 1.35rem);
  --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.075rem);
  --text-sm: 0.9rem;
  --text-xs: 0.78rem;

  /* --- Rhythm --------------------------------------------- */
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --max-w: 1200px;

  --radius-sm: 0.7rem;
  --radius: 1.1rem;
  --radius-lg: 1.8rem;
  --radius-pill: 999px;

  /* --- Motion --------------------------------------------- */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Elevation ------------------------------------------ */
  --shadow-card: 0 1px 0 oklch(100% 0 0 / 0.06) inset,
    0 18px 40px -20px oklch(0% 0 0 / 0.8);
  --shadow-float: 0 30px 70px -30px oklch(0% 0 0 / 0.85);
}