/* Robot Collective — Material Design 3 Design Tokens
   Dark theme (site is dark-first).
   Brand palette mapped to MD3 color roles:
     Primary  → blue  (#3b82f6 → tone-80: #9ECAFF)
     Secondary → purple (#8b5cf6 → tone-80: #CFBCFF)
     Tertiary  → cyan  (#00ffff  → tone-60: #4FD8EB)
*/

:root {
  /* ── Color roles ─────────────────────────────────────────── */
  --md-sys-color-primary:                 #9ECAFF;
  --md-sys-color-on-primary:              #003258;
  --md-sys-color-primary-container:       #004880;
  --md-sys-color-on-primary-container:    #D1E4FF;

  --md-sys-color-secondary:               #CFBCFF;
  --md-sys-color-on-secondary:            #381E72;
  --md-sys-color-secondary-container:     #4F378B;
  --md-sys-color-on-secondary-container:  #E9DDFF;

  --md-sys-color-tertiary:                #4FD8EB;
  --md-sys-color-on-tertiary:             #00363D;
  --md-sys-color-tertiary-container:      #004F58;
  --md-sys-color-on-tertiary-container:   #97F0FF;

  --md-sys-color-error:                   #FFB4AB;
  --md-sys-color-on-error:                #690005;
  --md-sys-color-error-container:         #93000A;
  --md-sys-color-on-error-container:      #FFDAD6;

  --md-sys-color-background:              #0a0a0a;
  --md-sys-color-on-background:           #E4E4E7;

  --md-sys-color-surface:                 #12131A;
  --md-sys-color-on-surface:              #E4E4E7;
  --md-sys-color-surface-variant:         #1A1A2E;
  --md-sys-color-on-surface-variant:      #CAC4D0;

  --md-sys-color-outline:                 rgba(59, 130, 246, 0.35);
  --md-sys-color-outline-variant:         rgba(255, 255, 255, 0.1);

  --md-sys-color-inverse-surface:         #E4E4E7;
  --md-sys-color-inverse-on-surface:      #0a0a0a;
  --md-sys-color-inverse-primary:         #0061A4;

  /* Surface tint (primary hue used for tonal elevation overlays) */
  --md-sys-color-surface-tint:            #9ECAFF;

  /* ── Elevation tonal overlays (dark theme: tint at opacity) ── */
  /* Level 0 = no overlay; Level 1–5 = increasing primary tint   */
  --md-sys-elevation-level1:  rgba(158, 202, 255, 0.05);
  --md-sys-elevation-level2:  rgba(158, 202, 255, 0.08);
  --md-sys-elevation-level3:  rgba(158, 202, 255, 0.11);
  --md-sys-elevation-level4:  rgba(158, 202, 255, 0.12);
  --md-sys-elevation-level5:  rgba(158, 202, 255, 0.14);

  /* ── Shape system (corner radius) ────────────────────────── */
  --md-sys-shape-none:         0px;
  --md-sys-shape-extra-small:  4px;
  --md-sys-shape-small:        8px;
  --md-sys-shape-medium:       12px;
  --md-sys-shape-large:        16px;
  --md-sys-shape-extra-large:  28px;
  --md-sys-shape-full:         9999px;

  /* ── Motion ──────────────────────────────────────────────── */
  --md-sys-motion-easing-standard:    cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized:  cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-decelerate:  cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-accelerate:  cubic-bezier(0.3, 0, 1, 1);

  --md-sys-motion-duration-short1:    50ms;
  --md-sys-motion-duration-short2:    100ms;
  --md-sys-motion-duration-short3:    150ms;
  --md-sys-motion-duration-short4:    200ms;
  --md-sys-motion-duration-medium1:   250ms;
  --md-sys-motion-duration-medium2:   300ms;
  --md-sys-motion-duration-medium3:   350ms;
  --md-sys-motion-duration-medium4:   400ms;
  --md-sys-motion-duration-long1:     450ms;
  --md-sys-motion-duration-long2:     500ms;

  /* ── Typography scale ────────────────────────────────────── */
  --md-sys-typescale-font:  'Roboto', sans-serif;

  /* Display */
  --md-sys-typescale-display-large-size:    57px;
  --md-sys-typescale-display-large-line:    64px;
  --md-sys-typescale-display-large-weight:  400;
  --md-sys-typescale-display-large-tracking: -0.25px;

  --md-sys-typescale-display-medium-size:   45px;
  --md-sys-typescale-display-medium-line:   52px;
  --md-sys-typescale-display-medium-weight: 400;

  --md-sys-typescale-display-small-size:    36px;
  --md-sys-typescale-display-small-line:    44px;
  --md-sys-typescale-display-small-weight:  400;

  /* Headline */
  --md-sys-typescale-headline-large-size:   32px;
  --md-sys-typescale-headline-large-line:   40px;
  --md-sys-typescale-headline-large-weight: 400;

  --md-sys-typescale-headline-medium-size:  28px;
  --md-sys-typescale-headline-medium-line:  36px;
  --md-sys-typescale-headline-medium-weight: 400;

  --md-sys-typescale-headline-small-size:   24px;
  --md-sys-typescale-headline-small-line:   32px;
  --md-sys-typescale-headline-small-weight: 400;

  /* Title */
  --md-sys-typescale-title-large-size:    22px;
  --md-sys-typescale-title-large-line:    28px;
  --md-sys-typescale-title-large-weight:  400;

  --md-sys-typescale-title-medium-size:   16px;
  --md-sys-typescale-title-medium-line:   24px;
  --md-sys-typescale-title-medium-weight: 500;
  --md-sys-typescale-title-medium-tracking: 0.15px;

  --md-sys-typescale-title-small-size:    14px;
  --md-sys-typescale-title-small-line:    20px;
  --md-sys-typescale-title-small-weight:  500;
  --md-sys-typescale-title-small-tracking: 0.1px;

  /* Body */
  --md-sys-typescale-body-large-size:     16px;
  --md-sys-typescale-body-large-line:     24px;
  --md-sys-typescale-body-large-weight:   400;
  --md-sys-typescale-body-large-tracking: 0.5px;

  --md-sys-typescale-body-medium-size:    14px;
  --md-sys-typescale-body-medium-line:    20px;
  --md-sys-typescale-body-medium-weight:  400;
  --md-sys-typescale-body-medium-tracking: 0.25px;

  --md-sys-typescale-body-small-size:     12px;
  --md-sys-typescale-body-small-line:     16px;
  --md-sys-typescale-body-small-weight:   400;
  --md-sys-typescale-body-small-tracking: 0.4px;

  /* Label */
  --md-sys-typescale-label-large-size:    14px;
  --md-sys-typescale-label-large-line:    20px;
  --md-sys-typescale-label-large-weight:  500;
  --md-sys-typescale-label-large-tracking: 0.1px;

  --md-sys-typescale-label-medium-size:   12px;
  --md-sys-typescale-label-medium-line:   16px;
  --md-sys-typescale-label-medium-weight: 500;
  --md-sys-typescale-label-medium-tracking: 0.5px;

  --md-sys-typescale-label-small-size:    11px;
  --md-sys-typescale-label-small-line:    16px;
  --md-sys-typescale-label-small-weight:  500;
  --md-sys-typescale-label-small-tracking: 0.5px;
}