/* ============================================================
   COSTA.STUDIO — DESIGN TOKENS
   The single source of truth for colour, type, spacing, radius,
   shadow and motion. Nothing else in the platform should define
   a raw hex value or a magic pixel number.

   Light is the primary mode; dark is a real variant with its own
   surface ramp — not an inversion.
   ============================================================ */

:root {
  /* ── BRAND ── */
  --costa-red:        #e8162a;
  --costa-red-hover:  #c9101f;
  --costa-red-press:  #a80d19;

  /* ── LIGHT MODE (primary) ── */
  --bg:            #ffffff;
  --bg-subtle:     #fafafa;
  --surface:       #ffffff;
  --surface-2:     #f6f6f7;
  --surface-3:     #efeff1;
  --surface-hover: #f2f2f4;
  --overlay:       rgba(10,10,12,.45);

  --text:          #0b0b0d;
  --text-2:        #55555e;
  --text-3:        #6e6e78;
  --text-on-accent:#ffffff;

  --border:        #e4e4e8;
  --border-strong: #d3d3d9;
  --border-accent: rgba(232,22,42,.30);

  --accent:        var(--costa-red);
  --accent-hover:  var(--costa-red-hover);
  --accent-press:  var(--costa-red-press);
  --accent-soft:   rgba(232,22,42,.07);
  --accent-soft-2: rgba(232,22,42,.13);

  --success:       #12873f;
  --success-soft:  rgba(18,135,63,.10);
  --warning:       #a86500;
  --warning-soft:  rgba(168,101,0,.10);
  --danger:        #c8102e;
  --danger-soft:   rgba(200,16,46,.09);

  --shadow-sm: 0 1px 2px rgba(11,11,13,.05);
  --shadow:    0 2px 8px rgba(11,11,13,.06), 0 1px 2px rgba(11,11,13,.04);
  --shadow-md: 0 8px 24px rgba(11,11,13,.08), 0 2px 6px rgba(11,11,13,.04);
  --shadow-lg: 0 24px 60px rgba(11,11,13,.12), 0 4px 12px rgba(11,11,13,.05);
  --shadow-accent: 0 8px 26px rgba(232,22,42,.22);

  /* ── TYPE ── */
  --font-display: 'Bebas Neue', 'DM Sans', sans-serif;
  --font-body:    'DM Sans', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, SFMono-Regular, monospace;

  --fs-display: clamp(40px, 5.4vw, 68px);
  --fs-h1:      clamp(30px, 3.4vw, 42px);
  --fs-h2:      clamp(23px, 2.2vw, 28px);
  --fs-h3:      19px;
  --fs-lg:      16px;
  --fs-body:    15px;
  --fs-sm:      13.5px;
  --fs-xs:      12.5px;
  --fs-mono:    12px;

  --lh-tight: 1.06;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── SPACE (8px scale) ── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ── RADIUS ── */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  /* ── LAYOUT ── */
  --sidebar-w:           248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h:            60px;
  --container:           1440px;

  /* ── MOTION ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: .14s; --t: .22s; --t-slow: .4s;

  --z-base:1; --z-sticky:100; --z-dropdown:400; --z-overlay:800; --z-modal:900; --z-toast:1000;
}

/* ── DARK MODE — a real surface ramp, not inverted light ── */
[data-theme="dark"] {
  --bg:            #0a0a0c;
  --bg-subtle:     #0f0f12;
  --surface:       #141418;
  --surface-2:     #1b1b20;
  --surface-3:     #232329;
  --surface-hover: #212127;
  --overlay:       rgba(0,0,0,.65);

  --text:          #f4f4f6;
  --text-2:        #a6a6b0;
  --text-3:        #8a8a95;

  --border:        #26262d;
  --border-strong: #34343d;
  --border-accent: rgba(232,22,42,.38);

  --accent:        #f42a3d;
  --accent-hover:  #ff3f50;
  --accent-press:  #d8192b;
  --accent-soft:   rgba(244,42,61,.10);
  --accent-soft-2: rgba(244,42,61,.18);

  --success:       #35c46b; --success-soft: rgba(53,196,107,.12);
  --warning:       #e0a33a; --warning-soft: rgba(224,163,58,.12);
  --danger:        #ff5566; --danger-soft:  rgba(255,85,102,.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow:    0 2px 8px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  --shadow-accent: 0 8px 30px rgba(244,42,61,.28);
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { -webkit-text-size-adjust:100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--accent); color:#fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

a { color: inherit; text-decoration: none; }
img, svg, video { display:block; max-width:100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background:none; border:none; cursor:pointer; }

/* Native dropdown popups otherwise fall back to OS colours, which collide
   with the theme (invisible text). Paint them from tokens explicitly. */
select { background: var(--surface-2); color: var(--text); border:1px solid var(--border); border-radius: var(--r-sm); }
select option { background: var(--surface); color: var(--text); }
select option:checked { background: var(--surface-3); }

/* ── TYPE UTILITIES ── */
.t-display { font-family:var(--font-display); font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:.005em; }
.t-h1 { font-size:var(--fs-h1); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:-.015em; }
.t-h2 { font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:-.01em; }
.t-h3 { font-size:var(--fs-h3); font-weight:var(--fw-bold); line-height:var(--lh-snug); }
.t-body { font-size:var(--fs-body); }
.t-sm { font-size:var(--fs-sm); }
.t-2 { color:var(--text-2); }
.t-3 { color:var(--text-3); }
.t-accent { color:var(--accent); }
/* Uppercase mono labels — used sparingly, for technical metadata only */
.t-label { font-family:var(--font-mono); font-size:var(--fs-mono); font-weight:var(--fw-bold);
           letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); }

/* ── EYEBROW ── */
.eyebrow { display:inline-flex; align-items:center; gap:var(--sp-2);
  font-family:var(--font-mono); font-size:var(--fs-mono); font-weight:var(--fw-bold);
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* ── BUTTON ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  height:42px; padding:0 var(--sp-5);
  font-size:var(--fs-sm); font-weight:var(--fw-semi);
  border-radius:var(--r-sm); border:1px solid transparent;
  white-space:nowrap; cursor:pointer;
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease),
             color var(--t) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease);
}
.btn:active { transform:translateY(1px); }
.btn svg { width:16px; height:16px; flex-shrink:0; }
.btn[disabled], .btn.is-disabled { opacity:.45; pointer-events:none; }

.btn-primary { background:var(--accent); color:var(--text-on-accent); }
.btn-primary:hover { background:var(--accent-hover); box-shadow:var(--shadow-accent); }
.btn-primary:active { background:var(--accent-press); }

.btn-secondary { background:var(--surface); color:var(--text); border-color:var(--border); }
.btn-secondary:hover { background:var(--surface-hover); border-color:var(--border-strong); }

.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--surface-2); color:var(--text); }

.btn-lg { height:50px; padding:0 var(--sp-6); font-size:var(--fs-lg); }
.btn-sm { height:34px; padding:0 var(--sp-4); font-size:var(--fs-xs); }
.btn-block { width:100%; }

.icon-btn {
  width:38px; height:38px; flex-shrink:0; border-radius:var(--r-full);
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--text-2); background:transparent; border:1px solid transparent;
  transition:background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.icon-btn:hover { background:var(--surface-2); color:var(--text); border-color:var(--border); }
.icon-btn svg { width:17px; height:17px; }
.icon-btn.is-bordered { border-color:var(--border); background:var(--surface); }

/* ── CARD ── */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.card-hover:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card-pad { padding:var(--sp-5); }

/* ── INPUT ── */
.input, .textarea {
  width:100%; background:var(--surface-2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:11px var(--sp-4); font-size:var(--fs-sm);
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.input::placeholder, .textarea::placeholder { color:var(--text-3); }
.input:focus, .textarea:focus {
  outline:none; background:var(--surface); border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.textarea { resize:vertical; min-height:120px; line-height:var(--lh-body); }
.field { display:block; margin-bottom:var(--sp-4); }
.field > label { display:block; font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--text-2); margin-bottom:var(--sp-2); }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:11px; font-weight:var(--fw-bold);
  letter-spacing:.04em; padding:3px 9px; border-radius:var(--r-sm);
  background:var(--surface-3); color:var(--text-2);
}
.badge-accent  { background:var(--accent-soft-2); color:var(--accent); }
.badge-success { background:var(--success-soft); color:var(--success); }
.badge-warning { background:var(--warning-soft); color:var(--warning); }
.badge-new::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }

/* ── CREDIT PILL ── */
.credit-pill {
  display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 var(--sp-4); border-radius:var(--r-full);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:var(--fs-xs); font-weight:var(--fw-semi); color:var(--text-2);
}
.credit-pill strong { font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--text); }
.credit-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }

/* ── SKELETON / LOADING ── */
.skeleton {
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%; animation:sk 1.3s var(--ease) infinite; border-radius:var(--r-sm);
}
@keyframes sk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.spinner {
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--accent-soft-2); border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ── EMPTY STATE ── */
.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-16) var(--sp-6); text-align:center;
  border:1px dashed var(--border-strong); border-radius:var(--r); color:var(--text-3);
}
.empty svg { width:34px; height:34px; opacity:.55; }
.empty h4 { font-size:var(--fs-lg); font-weight:var(--fw-semi); color:var(--text-2); }

/* ── LAYOUT HELPERS ── */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--sp-8); width:100%; }
.section { padding:var(--sp-16) 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.grid { display:grid; gap:var(--sp-4); }
.stack { display:flex; flex-direction:column; gap:var(--sp-4); }
.row { display:flex; align-items:center; gap:var(--sp-3); }
.spacer { flex:1; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:var(--r-full); border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background:var(--text-3); }

/* ── MOTION PREFERENCE ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}