/* Rhythm Design System — CSS Tokens */
/* Generated from src/theme/index.ts */

/* ── SF Pro Display — upload font files to activate ───────── */
/* Upload SF-Pro-Display-{Regular,Medium,Semibold,Bold}.otf    */
/* to the project root; the fallback stack renders until then. */
@font-face {
  font-family: 'SF Pro Display';
  src: url('./SF-Pro-Display-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('./SF-Pro-Display-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('./SF-Pro-Display-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('./SF-Pro-Display-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Accent ────────────────────────────────────────── */
  --accent-l: #1ed760;
  --accent-d: #cdfe00;

  /* ── Light Mode ────────────────────────────────────── */
  --bg:                #ffffff;
  --bg-secondary:      #f8f9fa;
  --bg-tertiary:       #f2f3f5;
  --surface:           #ffffff;
  --card:              #ffffff;
  --card-elevated:     #ffffff;

  --text-primary:      #1d1d1f;
  --text-secondary:    #6b7280;
  --text-tertiary:     #9ca3af;
  --text-placeholder:  #9ca3af;
  --text-muted:        #9ca3af;

  --border:            #e5e7eb;
  --border-light:      #f3f4f6;
  --divider:           #e5e7eb;

  --error:             #ec4899;
  --error-bg:          #fef2f2;
  --success:           #1ed760;
  --warning:           #f59e0b;

  --positive:          #1ed760;
  --positive-light:    #dcfce7;
  --negative:          #ef4444;

  --verdict-strong:    #1ed760;
  --verdict-fair:      #0d9488;
  --verdict-mixed:     #d97706;
  --verdict-risky:     #ef4444;

  --btn-primary-bg:    #1d1d1f;
  --btn-primary-text:  #ffffff;
  --btn-disabled-bg:   #e5e7eb;
  --btn-disabled-text: #9ca3af;

  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #1d1d1f;

  --pill-active:       #1d1d1f;
  --pill-active-text:  #ffffff;
  --pill-inactive:     transparent;
  --pill-inactive-text:#6b7280;

  --badge-success-bg:  #1ed76015;
  --badge-success-text:#1ed760;
  --badge-warning-bg:  #ffc10715;
  --badge-warning-text:#cb9900;
  --badge-error-bg:    #fee2e2;
  --badge-error-text:  #991b1b;
  --badge-overdue-bg:  #ec489915;
  --badge-overdue-text:#ec4899;
  --badge-info-bg:     #dbeafe;
  --badge-info-text:   #1e40af;
  --badge-neutral-bg:  #f3f4f6;
  --badge-neutral-text:#374151;
  --badge-primary-bg:  #1d1d1f;
  --badge-primary-text:#ffffff;
  --badge-purple-bg:   #7c4dff15;
  --badge-purple-text: #7c4dff;

  --status-booked-bg:   #7c4dff15;
  --status-booked-text: #7c4dff;
  --status-active-bg:   #ffc10715;
  --status-active-text: #cb9900;
  --status-submitted-bg:#0091ff15;
  --status-submitted-text:#0091ff;
  --status-approved-bg: #00bfa515;
  --status-approved-text:#00bfa5;
  --status-completed-bg:#1ed76015;
  --status-completed-text:#1ed760;

  --modal-bg:          #ffffff;
  --modal-backdrop:    rgba(0,0,0,0.5);

  --fab-bg:            #1d1d1f;
  --fab-icon:          #ffffff;

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

  /* ── Radius ────────────────────────────────────────── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 28px;
  --radius-full:9999px;

  /* ── Typography ────────────────────────────────────── */
  --font-base: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif;
  --fs-2xs: 10px;
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs-base:14px;
  --fs-lg:  16px;
  --fs-xl:  18px;
  --fs-2xl: 22px;
  --fs-3xl: 28px;
  --fs-4xl: 36px;
  --fs-5xl: 48px;
  --fs-6xl: 56px;
  --fs-7xl: 64px;

  /* ── Component Sizes ───────────────────────────────── */
  --input-height:  56px;
  --btn-height:    56px;
  --btn-radius:    var(--radius-full);
  --card-radius:   28px;
  --card-padding:  16px;
  --avatar-sm:     32px;
  --avatar-md:     40px;
  --avatar-lg:     48px;
  --avatar-xl:     64px;

  /* ── Shadows ───────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:  0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.12);
  --shadow-card:0 2px 8px rgba(0,0,0,0.04);
}

/* ── Dark Mode ─────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #000000;
    --bg-secondary:   #1c1c1e;
    --bg-tertiary:    #2c2c2e;
    --surface:        #1c1c1e;
    --card:           #1c1c1e;
    --card-elevated:  #2c2c2e;

    --text-primary:   #ffffff;
    --text-secondary: #8e8e8e;
    --text-tertiary:  #6b6b6b;
    --text-placeholder:#6b6b6b;
    --text-muted:     #6b6b6b;

    --border:         #38383a;
    --border-light:   #2c2c2e;
    --divider:        #38383a;

    --error:          #ff2d78;
    --success:        #cdfe00;
    --warning:        #ffd60a;

    --positive:       #cdfe00;
    --positive-light: #062a10;
    --negative:       #ff453a;

    --verdict-strong: #c5f135;
    --verdict-fair:   #4dffb4;
    --verdict-mixed:  #ffb800;
    --verdict-risky:  #ff3b30;

    --btn-primary-bg:   #ffffff;
    --btn-primary-text: #000000;
    --btn-disabled-bg:  #38383a;
    --btn-disabled-text:#6b6b6b;

    --gray-100: #1c1c1e;
    --gray-200: #2c2c2e;
    --gray-300: #38383a;
    --gray-400: #48484a;
    --gray-500: #636366;
    --gray-600: #8e8e93;
    --gray-700: #ababab;
    --gray-800: #d1d1d6;
    --gray-900: #f2f2f7;

    --pill-active:       #ffffff;
    --pill-active-text:  #000000;
    --pill-inactive-text:#8e8e93;

    --badge-success-bg:  #cdfe0025;
    --badge-success-text:#cdfe00;
    --badge-warning-bg:  #ffc10720;
    --badge-warning-text:#ffd60a;
    --badge-error-bg:    #ff453a20;
    --badge-error-text:  #ff453a;
    --badge-overdue-bg:  #ff2d7820;
    --badge-overdue-text:#ff2d78;
    --badge-info-bg:     #0a84ff20;
    --badge-info-text:   #0a84ff;
    --badge-neutral-bg:  #2c2c2e;
    --badge-neutral-text:#ababab;
    --badge-primary-bg:  #ffffff;
    --badge-primary-text:#000000;
    --badge-purple-bg:   #7c4dff30;
    --badge-purple-text: #bf9bff;

    --status-booked-bg:    #7c4dff30;
    --status-booked-text:  #bf9bff;
    --status-active-bg:    #ffc10730;
    --status-active-text:  #ffd60a;
    --status-submitted-bg: #0091ff35;
    --status-submitted-text:#60c8ff;
    --status-approved-bg:  #00bfa535;
    --status-approved-text:#3ffade;
    --status-completed-bg: #cdfe0028;
    --status-completed-text:#cdfe00;

    --modal-bg:      #1c1c1e;
    --modal-backdrop:rgba(0,0,0,0.8);

    --fab-bg:   #ffffff;
    --fab-icon: #000000;

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:   0 2px 8px rgba(0,0,0,0.4);
    --shadow-lg:   0 4px 16px rgba(0,0,0,0.5);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.3);
  }
}

/* ── Preview Canvas Base ───────────────────────────────── */
.ds-preview {
  font-family: var(--font-base);
  background: var(--bg);
  color: var(--text-primary);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

.ds-label {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

.ds-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ds-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ds-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}