/*
 * tokens.css
 * Canonical web mapping of the Lottie app design tokens.
 * Source of truth (do not invent values):
 *   LottieShared/Sources/LottieShared/DesignTokens.swift
 *   LottieShared/Sources/LottieShared/DynamicIslandTokens.swift
 * Light-mode values only - the marketing site renders in light mode.
 */

:root {
  color-scheme: light;

  /* ----------------------------------------------------------------
   * Typography - the app's system typography
   * ---------------------------------------------------------------- */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Sizes (px): 10, 11, 12, 14, 15, 17, 20, 24, 28, 34 */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 15px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 34px;

  --leading-tight: 1.2;
  --leading-base: 1.4;
  --leading-relaxed: 1.6;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ----------------------------------------------------------------
   * Spacing - 2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64
   * ---------------------------------------------------------------- */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;

  /* ----------------------------------------------------------------
   * Radii - 4, 8, 12, 16, 20, 24, 999
   * ---------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------------
   * Motion - durations 0.1 / 0.2 / 0.3 / 0.5 / 0.8s, companion float 3s.
   * Spring response 0.55, damping 0.825 → approximated as a
   * non-overshooting ease-out (brief forbids bounce / elastic).
   * ---------------------------------------------------------------- */
  --dur-instant: 0.1s;
  --dur-fast: 0.2s;
  --dur-base: 0.3s;
  --dur-slow: 0.5s;
  --dur-slowest: 0.8s;
  --companion-float: 3s;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); /* gentle settle, no rebound past rest */

  /* ----------------------------------------------------------------
   * Color - Semantic backgrounds (light)
   * ---------------------------------------------------------------- */
  --bg-root: #f5f7fc; /* Background.root */
  --bg-base: rgba(255, 255, 255, 0.85); /* Background.base  (neutral0Light @0.85) */
  --bg-elevated: rgba(255, 255, 255, 0.92); /* Background.elevated (neutral0Light @0.92) */
  --bg-glass: rgba(255, 255, 255, 0.7); /* Background.glass (neutral0Light @0.70) */
  --bg-solid: #ffffff;

  /* Neutral scale (light variants) */
  --neutral-0: #ffffff;
  --neutral-10: #f8f9fa;
  --neutral-20: #f1f3f5;
  --neutral-30: #e9ecef;
  --neutral-40: #dee2e6;
  --neutral-50: #ced4da;
  --neutral-60: #adb5bd;
  --neutral-70: #868e96;

  /* Labels (Liquid Glass light) */
  --label-primary: #1a1f35;
  --label-secondary: #4f5a7d;
  --label-muted: #8892b3;
  --label-on-accent: #ffffff;

  /* Interactive (light) */
  --interactive-primary: #00a085; /* mintStrongLight */
  --interactive-primary-hover: #35c9a8; /* mintSoftLight */
  --interactive-secondary: #3478c6; /* blueStrongLight */

  /* Brand palette (light) */
  --mint-strong: #00a085;
  --mint-soft: #35c9a8;
  --blue-strong: #3478c6;
  --blue-soft: #4a90e2;
  --warm-amber: #e88d40;
  --warm-amber-soft: #f5b97a;
  --warm-apricot: #e67e5c;
  --warm-apricot-soft: #f3a98c;
  --warm-rose: #e65f6b;
  --warm-rose-soft: #f69a9b;
  --purple-soft: #9f7aea;
  --purple-strong: #7c3aed;
  --pink-soft: #ec4899;

  /* Functional */
  --success: #00b894;
  --warning: #fdcb6e;
  --error: #ff7675;
  --info: #74b9ff;

  /* Borders / strokes (Liquid Glass, ink #1B2138) */
  --border-glass-subtle: rgba(27, 33, 56, 0.08);
  --border-glass-medium: rgba(27, 33, 56, 0.12);
  --border-glass-strong: rgba(27, 33, 56, 0.2);
  --border-default: #e9ecef;

  /* Shadows (Liquid Glass light - ink #1B2138) */
  --shadow-sm: 0 2px 8px rgba(27, 33, 56, 0.08);
  --shadow-md: 0 4px 16px rgba(27, 33, 56, 0.12);
  --shadow-lg: 0 8px 32px rgba(27, 33, 56, 0.16);

  /* Dark surfaces (root/elevated/glass dark) - used for the lock-screen stage */
  --dark-root: #070821;
  --dark-elevated: #161938;
  --dark-glass: #1a1d40;

  /* ----------------------------------------------------------------
   * Dynamic Island - PRD-compliant state colors + copy
   * ---------------------------------------------------------------- */
  --di-focus-purple: #8c5cf6;
  --di-focus-light: #a58cfa;
  --di-overdue-coral: #ff8a80; /* NEVER harsh red */
  --di-overdue-light: #ffab9f;
  --di-next-blue: #74b9ff;
  --di-next-accent: #45b7d1;
  --di-streak-lavender: #b8a9c9;
  --di-streak-lavender-end: #9b8ac4;
  --di-celebration-mint: #7dd3c0;
  --di-celebration-accent: #4ecdc4;

  /* ----------------------------------------------------------------
   * Layout helpers (site-level)
   * ---------------------------------------------------------------- */
  --measure: 74rem;
  --edge: clamp(1.25rem, 5vw, 3.5rem);
}