/* AccTube design tokens — dark background, electric cyan accent, minimal.
   Loaded BEFORE acctube-theme.css. Every colour in the theme / views must use a token, no hard-coded hex.

   Contrast (WCAG AA):
     --at-text     >= 14:1 on every surface     --at-text-2  >= 10:1
     --at-muted    >= 6:1                       --at-faint   >= 4.5:1 (including --at-raised)
     accent/success/warning/danger/info >= 5.6:1 on every surface and on their own -soft background (>= 5.2:1)
     --at-accent-ink on --at-accent 8.4:1 (on --at-accent-strong 6.3:1)
   Only --at-disabled-text may be < 4.5:1 (disabled control text — WCAG exemption). */
:root {
  /* ---- surfaces (deepest → raised) ---- */
  --at-bg: #0B0F17;           /* page background */
  --at-bg-elev: #0F1620;      /* header / footer / sidebar / inputs */
  --at-card: #121A26;         /* cards, panels, modals, dropdowns */
  --at-card-hover: #16202E;   /* row / card hover; secondary background inside cards */
  --at-raised: #1A2433;       /* raised layer inside cards (thead, code, chip) */
  --at-overlay: rgba(4, 7, 12, 0.72); /* backdrop modal / drawer */
  --at-surface-hover: rgba(255, 255, 255, 0.05); /* ghost button / menu item hover */
  --at-surface-active: rgba(255, 255, 255, 0.08);

  /* ---- borders ---- */
  --at-border: #1E293B;
  --at-border-strong: #334155;

  /* ---- text ---- */
  --at-text: #F1F5F9;         /* primary: titles, values */
  --at-text-2: #CBD5E1;       /* secondary: paragraphs, labels */
  --at-muted: #94A3B8;        /* muted: meta, descriptions, table headers */
  --at-faint: #7D8CA3;        /* faintest that still passes AA: dates, captions, placeholders */
  --at-disabled-text: #5B6779;/* ONLY for disabled controls */

  /* ---- accent ---- */
  --at-accent: #22D3EE;       /* cyan 400 */
  --at-accent-strong: #06B6D4;/* hover / pressed */
  --at-accent-hover: var(--at-accent-strong);
  --at-accent-soft: rgba(34, 211, 238, 0.12);
  --at-accent-soft-strong: rgba(34, 211, 238, 0.22);
  --at-accent-ink: #062A30;   /* text on accent backgrounds */

  /* ---- status (text/icon colour + soft background + border) ---- */
  --at-success: #34D399;
  --at-success-soft: rgba(52, 211, 153, 0.14);
  --at-success-border: rgba(52, 211, 153, 0.32);
  --at-warning: #FBBF24;
  --at-warning-soft: rgba(251, 191, 36, 0.14);
  --at-warning-border: rgba(251, 191, 36, 0.32);
  --at-danger: #F87171;
  --at-danger-soft: rgba(248, 113, 113, 0.14);
  --at-danger-border: rgba(248, 113, 113, 0.32);
  --at-info: #60A5FA;
  --at-info-soft: rgba(96, 165, 250, 0.14);
  --at-info-border: rgba(96, 165, 250, 0.32);
  --at-on-status: #0B0F17;    /* text on SOLID status backgrounds (danger button) */

  /* ---- shape ---- */
  --at-radius-xs: 6px;
  --at-radius-sm: 8px;
  --at-radius: 12px;
  --at-radius-lg: 16px;
  --at-radius-xl: 24px;
  --at-radius-pill: 999px;
  --at-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --at-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 30px rgba(0,0,0,0.35);
  --at-shadow-lg: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px rgba(0,0,0,0.5);

  /* focus: 2-layer ring (background gap + cyan line) — visible even on solid cyan buttons */
  --at-ring: 0 0 0 2px var(--at-bg), 0 0 0 4px var(--at-accent);
  --at-ring-input: 0 0 0 3px rgba(34, 211, 238, 0.35); /* inputs switch their border to accent instead */
  --at-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.35);

  /* ---- type ---- */
  --at-font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Noto Sans KR", "Noto Sans SC", sans-serif;
  --at-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 6-step scale + 2 display steps */
  --at-fs-xs: 12px;   /* meta, table labels, badges */
  --at-fs-sm: 14px;   /* default app body */
  --at-fs-md: 16px;   /* long-form body, mobile inputs (stops iOS zoom) */
  --at-fs-lg: 20px;   /* card / section titles */
  --at-fs-xl: 24px;   /* page titles (app H1) */
  --at-fs-2xl: 32px;  /* public page titles */
  --at-fs-display: clamp(32px, 5vw, 52px);
  --at-lh-tight: 1.2;
  --at-lh: 1.5;
  --at-lh-loose: 1.65;
  --at-fw-regular: 400;
  --at-fw-medium: 500;
  --at-fw-semibold: 600;

  /* ---- spacing / rhythm ---- */
  --at-space-1: 4px; --at-space-2: 8px; --at-space-3: 12px; --at-space-4: 16px;
  --at-space-5: 24px; --at-space-6: 32px; --at-space-7: 48px; --at-space-8: 64px;
  --at-container: 1200px;
  --at-container-narrow: 760px; /* text pages: terms, blog, FAQ */
  --at-gutter: 16px;            /* mobile left/right margin */
  --at-header-h: 64px;
  --at-control-h-sm: 32px;
  --at-control-h: 40px;
  --at-control-h-lg: 48px;
  --at-tap: 44px;               /* minimum touch target on mobile */
  --at-transition: 160ms ease;

  /* ---- stacking (z-index) ---- */
  --at-z-base: 1;
  --at-z-sticky: 1020;   /* sticky header, sticky buy bar */
  --at-z-header: 1030;
  --at-z-dropdown: 1050;
  --at-z-drawer: 1100;   /* menu mobile */
  --at-z-modal-backdrop: 1050; /* = Bootstrap */
  --at-z-modal: 1055;    /* = Bootstrap */
  --at-z-toast: 1090;
  --at-z-loader: 999999; /* full-page loading overlay */

  color-scheme: dark;
}

/* Bootstrap 5.3 variable mapping — every Bootstrap component (card, modal, dropdown, table, list-group, offcanvas, toast,
   form-control, pagination, nav-tabs…) picks up the dark colours. */
[data-bs-theme="dark"], :root {
  --bs-body-bg: var(--at-bg);
  --bs-body-bg-rgb: 11, 15, 23;
  --bs-body-color: var(--at-text);
  --bs-body-color-rgb: 241, 245, 249;
  --bs-emphasis-color: var(--at-text);
  --bs-emphasis-color-rgb: 241, 245, 249;
  --bs-heading-color: var(--at-text);
  --bs-secondary-color: var(--at-muted);
  --bs-tertiary-color: var(--at-faint);
  --bs-secondary-bg: var(--at-card);
  --bs-tertiary-bg: var(--at-bg-elev);
  --bs-border-color: var(--at-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-primary: var(--at-accent);
  --bs-primary-rgb: 34, 211, 238;
  --bs-primary-text-emphasis: var(--at-accent);
  --bs-primary-bg-subtle: var(--at-accent-soft);
  --bs-primary-border-subtle: rgba(34, 211, 238, 0.32);
  --bs-secondary: var(--at-muted);
  --bs-secondary-rgb: 148, 163, 184;
  --bs-success: var(--at-success);
  --bs-success-rgb: 52, 211, 153;
  --bs-success-text-emphasis: var(--at-success);
  --bs-success-bg-subtle: var(--at-success-soft);
  --bs-success-border-subtle: var(--at-success-border);
  --bs-warning: var(--at-warning);
  --bs-warning-rgb: 251, 191, 36;
  --bs-warning-text-emphasis: var(--at-warning);
  --bs-warning-bg-subtle: var(--at-warning-soft);
  --bs-warning-border-subtle: var(--at-warning-border);
  --bs-danger: var(--at-danger);
  --bs-danger-rgb: 248, 113, 113;
  --bs-danger-text-emphasis: var(--at-danger);
  --bs-danger-bg-subtle: var(--at-danger-soft);
  --bs-danger-border-subtle: var(--at-danger-border);
  --bs-info: var(--at-info);
  --bs-info-rgb: 96, 165, 250;
  --bs-info-text-emphasis: var(--at-info);
  --bs-info-bg-subtle: var(--at-info-soft);
  --bs-info-border-subtle: var(--at-info-border);
  /* --bs-white/black/light/dark-rgb are NOT changed: Bootstrap uses them for both .bg-* and .text-* — the theme overrides each class. */
  --bs-light-bg-subtle: var(--at-card-hover);
  --bs-dark-bg-subtle: var(--at-bg-elev);
  --bs-link-color: var(--at-accent);
  --bs-link-color-rgb: 34, 211, 238;
  --bs-link-hover-color: var(--at-accent-strong);
  --bs-link-hover-color-rgb: 6, 182, 212;
  --bs-code-color: var(--at-accent);
  --bs-highlight-bg: var(--at-warning-soft);
  --bs-body-font-family: var(--at-font);
  --bs-border-radius: var(--at-radius-sm);
  --bs-border-radius-sm: var(--at-radius-xs);
  --bs-border-radius-lg: var(--at-radius);
  --bs-border-radius-xl: var(--at-radius-lg);
  --bs-border-radius-pill: var(--at-radius-pill);
  --bs-box-shadow: var(--at-shadow);
  --bs-box-shadow-sm: var(--at-shadow-sm);
  --bs-box-shadow-lg: var(--at-shadow-lg);
  --bs-focus-ring-color: rgba(34, 211, 238, 0.35);
  --bs-form-valid-color: var(--at-success);
  --bs-form-valid-border-color: var(--at-success);
  --bs-form-invalid-color: var(--at-danger);
  --bs-form-invalid-border-color: var(--at-danger);
  --bs-card-bg: var(--at-card);
}