/* Nod Web — Design Tokens
   Marketing surface: light, photographic, premium consumer.
   Accent stays #007AFF to match the app. */

:root {
  /* Surfaces — light, clean, never mud */
  --color-bg:            #FFFFFF;
  --color-bg-secondary:  #F5F5F7;
  --color-bg-tertiary:   #E8E8ED;
  --color-ink:           #1D1D1F;
  --color-ink-soft:      #6E6E73;

  /* Ambient (subtle, for dark photo overlays only) */
  --color-ambient-blue:   #0A1633;
  --color-ambient-violet: #21123D;

  /* Text on light */
  --color-label:           #1D1D1F;
  --color-label-secondary: #6E6E73;
  --color-label-tertiary:  #86868B;
  --color-label-disabled:  #AEAEB2;

  /* Text on photo / dark */
  --color-on-dark:           #FFFFFF;
  --color-on-dark-secondary: rgba(255, 255, 255, 0.78);

  /* Accent — one accent only */
  --color-accent: #007AFF;

  /* Status */
  --color-status-connection: #BF5AF2;
  --color-status-active:     #30D158;
  --color-status-error:      #FF453A;
  --color-status-warning:    #FF9F0A;

  /* Glass (light nav) */
  --color-glass-fill:        rgba(255, 255, 255, 0.72);
  --color-glass-fill-strong: rgba(255, 255, 255, 0.88);
  --color-glass-border:      rgba(0, 0, 0, 0.08);
  --color-glass-highlight:   rgba(255, 255, 255, 0.5);

  /* Separator */
  --color-separator: rgba(0, 0, 0, 0.08);

  /* Typography — fluid, bold display */
  --text-display:     clamp(40px, 7vw, 80px);
  --text-large-title: clamp(32px, 4.5vw, 56px);
  --text-title:       clamp(28px, 3vw, 40px);
  --text-title-2:     22px;
  --text-headline:    17px;
  --text-body:        17px;
  --text-subhead:     15px;
  --text-caption:     12px;

  --weight-bold:     700;
  --weight-semibold: 600;
  --weight-regular:  400;

  /* Spacing */
  --space-1:    8px;
  --space-2:    16px;
  --space-3:    24px;
  --space-4:    32px;
  --space-5:    48px;
  --space-6:    64px;
  --space-7:    96px;
  --space-8:    128px;
  --space-page: max(16px, 4vw);

  /* Radii — tighter, modern */
  --radius-button: 980px;
  --radius-card:   16px;
  --radius-nav:    980px;
  --radius-sheet:  20px;
  --radius-input:  12px;
  --radius-circle: 50%;

  /* Motion */
  --transition-quick:    180ms cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-entrance: 700ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-orb:      3500ms ease-in-out;

  /* Layout */
  --max-content: 720px;
  --max-layout:  1120px;
}