@import url("tokens.css");

:root {
  /* Landing — Pastel Bento v3 only (override legacy green/blue from tokens.css) */
  --color-accent: var(--pastel-yellow);
  --color-accent-secondary: var(--pastel-lavender);
  --color-accent-tertiary: var(--pastel-lime);
  --color-accent-highlight: var(--pastel-magenta);
  --gradient-mesh-combined: none;

  --surface-canvas: var(--pastel-canvas);
  --surface-base-surface: var(--pastel-canvas);
  --surface-raised-surface: var(--pastel-canvas);
  --surface-overlay-surface: var(--pastel-canvas);

  /* Borders */
  --color-border-hairline: rgba(255, 255, 255, 0.1);
  --color-border-muted: rgba(255, 255, 255, 0.08);

  /* Typography — Geologica (display) + Poppins (UI), AppTypeScale parity */
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  --font-weight-display: 500;

  --text-caption: 0.875rem;
  --leading-caption: 1.5;
  --tracking-caption: 0.06em;

  --text-body-sm: 1.0625rem;
  --leading-body-sm: 1.55;

  --text-body: 1.1875rem;
  --leading-body: 1.55;
  --tracking-body: -0.01em;

  --text-subheading: 1.375rem;
  --leading-subheading: 1.45;

  --text-heading-sm: 1.75rem;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.02em;

  --text-heading: 2.25rem;
  --leading-heading: 1.15;
  --tracking-heading: -0.03em;

  --text-heading-lg: 3.5rem;
  --leading-heading-lg: 1.08;
  --tracking-heading-lg: -0.04em;

  --text-display: clamp(3.25rem, 7.5vw, 5rem);
  --leading-display: 1.02;
  --tracking-display: -0.025em;
  --tracking-studio-label: 0.12em;

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

  /* Spacing */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  --page-max-width: 1240px;
  --section-gap: 112px;
  --card-padding: 32px;
  --element-gap: 20px;

  --bp-md: 768px;
  --bp-lg: 900px;
  --bp-xl: 960px;

  --radius-glass: 16px;

  /* Radius (landing) */
  --radius-bezel-inner: 16px;
  --radius-buttons: 10px;
  --radius-inputs: 10px;
  --radius-modals: 20px;
  --radius-badges: 8px;
  --radius-buttonpill: 999px;

  /* Shadows */
  --shadow-subtle-4: rgba(0, 0, 0, 0.2) 0 8px 24px -4px;
  --shadow-tab: var(--shadow-tab-dock);

  /* App screenshots — uniform display size on landing */
  --app-shot-max-width: 340px;
  --app-shot-max-height: 693px;
  --app-shot-column-width: 340px;
  --app-shot-hero-max-width: 400px;
  --app-shot-hero-max-height: 815px;
}