/**
 * Boutme Design System — Tokens
 * Premium Apple-inspired SaaS UI
 * Version 2.0
 */

:root {
  /* ─── Color: Base Surfaces ─────────────────────────────── */
  --bm-bg-base:        #09090b;
  --bm-bg-elevated:    #111116;
  --bm-bg-raised:      #1a1a22;
  --bm-bg-overlay:     #22222c;
  --bm-bg-hover:       rgba(255,255,255,0.04);
  --bm-bg-active:      rgba(255,255,255,0.07);

  /* ─── Color: Borders ───────────────────────────────────── */
  --bm-border-subtle:  rgba(255,255,255,0.05);
  --bm-border-default: rgba(255,255,255,0.09);
  --bm-border-strong:  rgba(255,255,255,0.16);
  --bm-border-focus:   rgba(0,122,255,0.6);

  /* ─── Color: Text ──────────────────────────────────────── */
  --bm-text-primary:   #f5f5f7;
  --bm-text-secondary: #98989f;
  --bm-text-tertiary:  #636366;
  --bm-text-disabled:  #3a3a3e;
  --bm-text-inverse:   #09090b;

  /* ─── Color: Accent ─────────────────────────────────────── */
  --bm-accent:         #007aff;
  --bm-accent-hover:   #0a84ff;
  --bm-accent-dim:     rgba(0,122,255,0.12);
  --bm-accent-glow:    0 0 0 3px rgba(0,122,255,0.25);

  /* ─── Color: Brand Teal ─────────────────────────────────── */
  --bm-brand:          #00b8d5;
  --bm-brand-hover:    #00cef0;
  --bm-brand-dim:      rgba(0,184,213,0.12);

  /* ─── Color: Semantic ───────────────────────────────────── */
  --bm-green:          #34c759;
  --bm-green-dim:      rgba(52,199,89,0.12);
  --bm-red:            #ff3b30;
  --bm-red-dim:        rgba(255,59,48,0.12);
  --bm-yellow:         #ff9f0a;
  --bm-yellow-dim:     rgba(255,159,10,0.12);
  --bm-purple:         #bf5af2;
  --bm-purple-dim:     rgba(191,90,242,0.12);
  --bm-teal:           #5ac8fa;
  --bm-teal-dim:       rgba(90,200,250,0.12);

  /* ─── Gradient ──────────────────────────────────────────── */
  --bm-gradient-brand: linear-gradient(135deg, #007aff 0%, #00b8d5 100%);
  --bm-gradient-dark:  linear-gradient(180deg, #1a1a22 0%, #09090b 100%);
  --bm-gradient-glow:  radial-gradient(ellipse at top, rgba(0,122,255,0.12) 0%, transparent 60%);
  --bm-gradient-card:  linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);

  /* ─── Typography ─────────────────────────────────────────── */
  --bm-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --bm-font-mono:      'SF Mono', 'Fira Code', Consolas, monospace;

  --bm-text-xs:        0.6875rem;   /* 11px */
  --bm-text-sm:        0.8125rem;   /* 13px */
  --bm-text-base:      0.9375rem;   /* 15px */
  --bm-text-md:        1.0625rem;   /* 17px */
  --bm-text-lg:        1.1875rem;   /* 19px */
  --bm-text-xl:        1.375rem;    /* 22px */
  --bm-text-2xl:       1.75rem;     /* 28px */
  --bm-text-3xl:       2.125rem;    /* 34px */
  --bm-text-4xl:       2.75rem;     /* 44px */
  --bm-text-5xl:       3.5rem;      /* 56px */

  --bm-leading-tight:  1.1;
  --bm-leading-snug:   1.25;
  --bm-leading-base:   1.5;
  --bm-leading-loose:  1.75;

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

  /* ─── Spacing ────────────────────────────────────────────── */
  --bm-space-1:    4px;
  --bm-space-2:    8px;
  --bm-space-3:    12px;
  --bm-space-4:    16px;
  --bm-space-5:    20px;
  --bm-space-6:    24px;
  --bm-space-8:    32px;
  --bm-space-10:   40px;
  --bm-space-12:   48px;
  --bm-space-16:   64px;
  --bm-space-20:   80px;
  --bm-space-24:   96px;

  /* ─── Border Radius ──────────────────────────────────────── */
  --bm-radius-xs:  6px;
  --bm-radius-sm:  8px;
  --bm-radius-md:  12px;
  --bm-radius-lg:  16px;
  --bm-radius-xl:  20px;
  --bm-radius-2xl: 24px;
  --bm-radius-full:9999px;

  /* ─── Shadows ─────────────────────────────────────────────── */
  --bm-shadow-xs:  0 1px 2px rgba(0,0,0,0.5);
  --bm-shadow-sm:  0 2px 8px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
  --bm-shadow-md:  0 4px 16px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  --bm-shadow-lg:  0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  --bm-shadow-xl:  0 20px 60px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.07);
  --bm-shadow-glow:0 0 0 1px var(--bm-border-default), 0 8px 40px rgba(0,0,0,0.6);
  --bm-shadow-brand:0 4px 24px rgba(0,122,255,0.35);

  /* ─── Animations ─────────────────────────────────────────── */
  --bm-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --bm-ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --bm-ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);
  --bm-ease-linear:linear;

  --bm-dur-fast:   100ms;
  --bm-dur-base:   200ms;
  --bm-dur-slow:   350ms;
  --bm-dur-slower: 500ms;

  /* ─── Layout ─────────────────────────────────────────────── */
  --bm-sidebar-w:         260px;
  --bm-sidebar-collapsed: 72px;
  --bm-topbar-h:          56px;
  --bm-bottomnav-h:       72px;
  --bm-content-max:       1200px;

  /* ─── Z-Index Stack ──────────────────────────────────────── */
  --bm-z-base:     0;
  --bm-z-dropdown: 100;
  --bm-z-sidebar:  200;
  --bm-z-topbar:   300;
  --bm-z-sheet:    400;
  --bm-z-modal:    500;
  --bm-z-toast:    600;
  --bm-z-top:      9999;
}

/* ─── Light Mode ─────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bm-bg-base:        #f5f5f7;
    --bm-bg-elevated:    #ffffff;
    --bm-bg-raised:      #f0f0f2;
    --bm-bg-overlay:     #e8e8ed;
    --bm-bg-hover:       rgba(0,0,0,0.04);
    --bm-bg-active:      rgba(0,0,0,0.07);

    --bm-border-subtle:  rgba(0,0,0,0.06);
    --bm-border-default: rgba(0,0,0,0.10);
    --bm-border-strong:  rgba(0,0,0,0.18);

    --bm-text-primary:   #1c1c1e;
    --bm-text-secondary: #6c6c70;
    --bm-text-tertiary:  #aeaeb2;
    --bm-text-disabled:  #c7c7cc;
    --bm-text-inverse:   #f5f5f7;

    --bm-shadow-xs:  0 1px 2px rgba(0,0,0,0.08);
    --bm-shadow-sm:  0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.05);
    --bm-shadow-md:  0 4px 16px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
    --bm-shadow-lg:  0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.07);
    --bm-shadow-xl:  0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.08);
  }
}

/* ─── Force Dark Theme ────────────────────────────────────────── */
[data-theme="dark"] {
  --bm-bg-base:        #09090b;
  --bm-bg-elevated:    #111116;
  --bm-bg-raised:      #1a1a22;
  --bm-bg-overlay:     #22222c;
  --bm-text-primary:   #f5f5f7;
  --bm-text-secondary: #98989f;
  --bm-text-tertiary:  #636366;
}

[data-theme="light"] {
  --bm-bg-base:        #f5f5f7;
  --bm-bg-elevated:    #ffffff;
  --bm-bg-raised:      #f0f0f2;
  --bm-bg-overlay:     #e8e8ed;
  --bm-text-primary:   #1c1c1e;
  --bm-text-secondary: #6c6c70;
  --bm-text-tertiary:  #aeaeb2;
}