/* ============================================================
   Ecom Freedom Design System — tokens + utilities
   Single source of truth: design.md (Clay layout) + EF brand colors
   Canvas: deep purple-black. Primary: electric violet. Gold = scarcity only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand & accent ---- */
  --ef-primary:        #7C5CF5;
  --ef-primary-active: #9B82FF;
  --ef-primary-deep:   #5A3DDB;
  --ef-primary-disabled: #2D2350;

  --ef-gold:           #E8B94A;   /* SCARCITY ONLY — countdowns, "X seats left" */
  --ef-gold-hi:        #F0CB6C;

  /* ---- Surface ---- */
  --ef-canvas:         #0E0B1A;   /* deep purple-black, system floor */
  --ef-surface-1:      #161227;   /* lifted card */
  --ef-surface-2:      #1F1936;   /* nav, top of stack */
  --ef-surface-3:      #2D2350;   /* deepest violet tint */

  /* ---- Text ---- */
  --ef-ink:            #F5F2FF;   /* off-white display */
  --ef-body-strong:    #EAE7F5;
  --ef-body:           #C6C5CC;
  --ef-muted:          #8E8BA0;
  --ef-muted-soft:     #6B6880;
  --ef-on-primary:     #FFFFFF;
  --ef-on-gold:        #0E0B1A;

  /* ---- Hairline ---- */
  --ef-hairline:       rgba(255,255,255,0.08);
  --ef-hairline-soft:  rgba(255,255,255,0.04);
  --ef-hairline-strong: rgba(255,255,255,0.18);

  /* ---- Semantic ---- */
  --ef-success: #5DD49A;
  --ef-warning: #E8B94A;
  --ef-error:   #FF6B7A;

  /* ---- Type ---- */
  --ef-display-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ef-body-stack:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Radius ---- */
  --ef-r-xs: 6px;
  --ef-r-sm: 8px;
  --ef-r-md: 12px;
  --ef-r-lg: 16px;
  --ef-r-xl: 24px;
  --ef-r-pill: 9999px;

  /* ---- Spacing ---- */
  --ef-s-xxs: 4px;
  --ef-s-xs: 8px;
  --ef-s-sm: 12px;
  --ef-s-md: 16px;
  --ef-s-lg: 24px;
  --ef-s-xl: 32px;
  --ef-s-xxl: 48px;
  --ef-s-section: 96px;
}

/* ============================================================ Type ============================================================ */
.ef-display-xl { font-family: var(--ef-display-stack); font-size: 72px; font-weight: 500; line-height: 1.0; letter-spacing: -2.5px; color: var(--ef-ink); }
.ef-display-lg { font-family: var(--ef-display-stack); font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -2px; color: var(--ef-ink); }
.ef-display-md { font-family: var(--ef-display-stack); font-size: 40px; font-weight: 500; line-height: 1.1; letter-spacing: -1px; color: var(--ef-ink); }
.ef-display-sm { font-family: var(--ef-display-stack); font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.5px; color: var(--ef-ink); }
.ef-title-lg { font-family: var(--ef-body-stack); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; color: var(--ef-ink); }
.ef-title-md { font-family: var(--ef-body-stack); font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--ef-ink); }
.ef-title-sm { font-family: var(--ef-body-stack); font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ef-ink); }
.ef-body-md  { font-family: var(--ef-body-stack); font-size: 16px; font-weight: 400; line-height: 1.55; color: var(--ef-body); }
.ef-body-sm  { font-family: var(--ef-body-stack); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--ef-body); }
.ef-caption  { font-family: var(--ef-body-stack); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ef-muted); }
.ef-caption-up { font-family: var(--ef-body-stack); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ef-muted); }
.ef-button-text { font-family: var(--ef-body-stack); font-size: 14px; font-weight: 600; line-height: 1.0; }
.ef-nav-link { font-family: var(--ef-body-stack); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ef-body); }

/* ============================================================ Components ============================================================ */
.ef-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:var(--ef-r-md); border:0; cursor:pointer; font-family:var(--ef-body-stack); font-size:14px; font-weight:600; line-height:1.0; text-decoration:none; transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms; }
.ef-btn-primary { background: var(--ef-primary); color: var(--ef-on-primary); }
.ef-btn-primary:hover { background: var(--ef-primary-active); box-shadow: 0 8px 32px rgba(124,92,245,0.45); }
.ef-btn-primary:disabled { background: var(--ef-primary-disabled); color: var(--ef-muted); cursor:not-allowed; }
.ef-btn-secondary { background: transparent; color: var(--ef-ink); border:1px solid var(--ef-hairline-strong); }
.ef-btn-secondary:hover { border-color: var(--ef-ink); }
.ef-btn-on-color { background: var(--ef-ink); color: var(--ef-canvas); }
.ef-btn-on-color:hover { background: #fff; }
.ef-btn-text { background: transparent; color: var(--ef-ink); height:auto; padding:0; border-radius:0; }
.ef-btn-text:hover { text-decoration: underline; }

.ef-text-link { color: var(--ef-primary-active); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.ef-input { display:block; width:100%; height:44px; padding:12px 16px; background: var(--ef-surface-1); color: var(--ef-ink); border:1px solid var(--ef-hairline); border-radius: var(--ef-r-md); font-family: var(--ef-body-stack); font-size:16px; font-weight:400; line-height:1.55; outline:none; transition: border-color 120ms; }
.ef-input::placeholder { color: var(--ef-muted-soft); }
.ef-input:focus { border-color: var(--ef-primary); border-width:2px; padding:11px 15px; }

.ef-card { background: var(--ef-surface-1); color: var(--ef-ink); border:1px solid var(--ef-hairline); border-radius: var(--ef-r-lg); padding: var(--ef-s-lg); }

/* Feature surfaces — tonal violet system, NOT a rainbow */
.ef-feature { border-radius: var(--ef-r-xl); padding: var(--ef-s-xl); border: 1px solid var(--ef-hairline); }
.ef-feature-primary  { background: linear-gradient(135deg, var(--ef-primary) 0%, var(--ef-primary-deep) 100%); color: var(--ef-on-primary); border:0; }
.ef-feature-violet   { background: linear-gradient(135deg, var(--ef-surface-3) 0%, var(--ef-surface-2) 100%); color: var(--ef-ink); }
.ef-feature-surface  { background: var(--ef-surface-2); color: var(--ef-ink); }
.ef-feature-surface-2{ background: var(--ef-surface-1); color: var(--ef-ink); }
.ef-feature-gold     { background: linear-gradient(135deg, var(--ef-gold) 0%, #C99935 100%); color: var(--ef-on-gold); border:0; }

.ef-tab { display:inline-flex; align-items:center; height:32px; padding:8px 16px; background:transparent; color: var(--ef-muted); border:0; border-radius: var(--ef-r-pill); font-family: var(--ef-body-stack); font-size:14px; font-weight:500; cursor:pointer; transition: background 120ms, color 120ms; }
.ef-tab:hover { color: var(--ef-ink); }
.ef-tab.is-active { background: var(--ef-surface-2); color: var(--ef-ink); }

.ef-badge { display:inline-flex; align-items:center; height:24px; padding:4px 12px; background: var(--ef-surface-2); color: var(--ef-ink); border-radius: var(--ef-r-pill); font-family: var(--ef-body-stack); font-size:13px; font-weight:500; line-height:1.4; }
.ef-badge-gold { background: var(--ef-gold); color: var(--ef-on-gold); font-weight:600; letter-spacing:1px; text-transform: uppercase; font-size:11px; }
.ef-badge-primary { background: rgba(124,92,245,0.18); color: var(--ef-primary-active); border:1px solid rgba(124,92,245,0.35); }

.ef-canvas { background: var(--ef-canvas); color: var(--ef-ink); }
.ef-section { padding: var(--ef-s-section) 0; }
.ef-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

html, body { background: var(--ef-canvas); color: var(--ef-ink); font-family: var(--ef-body-stack); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; }