/* ============================================================
   SUKATA — Design Tokens (Identity 1.6)
   "Do quebrado ao extraordinário."
   Arqueotecnologia: pedra escura · ferro · cobre · energia laranja.
   ============================================================ */

:root {
  /* ---- Marca (energia interna) ---- */
  --suk-orange: #ff7a18;
  --suk-orange-hot: #ff6a00;
  --suk-orange-2: #ff9a4a;
  --suk-orange-deep: #c4530a;
  --sukata-orange: var(--suk-orange);
  --sukata-orange-hot: var(--suk-orange-hot);
  --suk-orange-gradient: linear-gradient(180deg, #ff9a4a 0%, #ff7a18 55%, #ff6a00 100%);
  --suk-orange-soft: rgba(255, 122, 24, 0.12);
  --suk-orange-line: rgba(255, 122, 24, 0.42);
  --suk-orange-glow: rgba(255, 122, 24, 0.18);
  --copper: #b87333;
  --copper-dim: rgba(184, 115, 51, 0.35);
  --iron: #6b7280;
  --iron-rust: #8a6a4a;

  /* ---- Status (verde só sucesso) ---- */
  --acc-green: #3d9b6e;
  --acc-green-strong: #2f7d58;
  --acc-teal: #3d9b6e;
  --acc-green-soft: rgba(61, 155, 110, 0.12);
  --acc-green-line: rgba(61, 155, 110, 0.35);
  --acc-green-glow: rgba(61, 155, 110, 0.14);

  /* ---- Estados ---- */
  --success: #3d9b6e;
  --success-bg: rgba(61, 155, 110, 0.12);
  --success-line: rgba(61, 155, 110, 0.4);
  --warning: #c9a227;
  --warning-bg: rgba(201, 162, 39, 0.12);
  --warning-line: rgba(201, 162, 39, 0.4);
  --danger: #c45c4a;
  --danger-strong: #a84838;
  --danger-bg: rgba(196, 92, 74, 0.12);
  --danger-line: rgba(196, 92, 74, 0.4);
  --info: #8a9aab;
  --info-bg: rgba(138, 154, 171, 0.12);
  --info-line: rgba(138, 154, 171, 0.35);

  /* ---- Superfícies (void / mineral) ---- */
  --bg-void: #050708;
  --bg-primary: #080c0f;
  --bg-surface: #0c1114;
  --bg-elevated: #111719;
  --bg-0: var(--bg-void);
  --bg-1: var(--bg-primary);
  --surface-1: var(--bg-surface);
  --surface-2: var(--bg-elevated);
  --surface-3: #161d22;
  --surface-hover: rgba(230, 226, 217, 0.04);
  --surface-active: rgba(230, 226, 217, 0.08);
  --glass-bg: rgba(12, 17, 20, 0.82);
  --glass-line: rgba(230, 226, 217, 0.08);

  /* ---- Bordas ---- */
  --border: rgba(230, 226, 217, 0.1);
  --border-strong: rgba(230, 226, 217, 0.18);
  --border-focus: rgba(255, 122, 24, 0.55);
  --border-panel: rgba(230, 226, 217, 0.12);

  /* ---- Texto (mineral) ---- */
  --text-primary: #e6e2d9;
  --text-secondary: #9a9488;
  --text-muted: #5e5a52;
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);
  --text-on-orange: #1a0c00;
  --text-on-green: #04150e;

  /* ---- Layout ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  --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;

  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 56px;
  --content-max: 1280px;

  /* ---- Sombras (soturnas, sem glow SaaS) ---- */
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.4);

  /* ---- Tipografia ---- */
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo,
    Consolas, monospace;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-26: 26px;
  --fs-34: 34px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 160ms;
  --dur-slow: 320ms;

  /* ---- Fundos decorativos (sutil) ---- */
  --page-glow-1: radial-gradient(800px 420px at -6% -10%, rgba(255, 122, 24, 0.045), transparent 62%);
  --page-glow-2: radial-gradient(700px 480px at 110% 0%, rgba(184, 115, 51, 0.04), transparent 60%);
  --grid-line: rgba(230, 226, 217, 0.035);
  --noise-opacity: 0.035;
}

/* ============ Tema claro ============ */
[data-theme="light"] {
  --bg-void: #f3f1ec;
  --bg-primary: #ebe7e0;
  --bg-surface: #faf8f4;
  --bg-elevated: #ffffff;
  --bg-0: var(--bg-void);
  --bg-1: var(--bg-primary);
  --surface-1: var(--bg-surface);
  --surface-2: var(--bg-elevated);
  --surface-3: #e8e4dc;
  --surface-hover: rgba(20, 16, 10, 0.04);
  --surface-active: rgba(20, 16, 10, 0.08);
  --glass-bg: rgba(250, 248, 244, 0.88);
  --glass-line: rgba(20, 16, 10, 0.08);

  --border: rgba(20, 16, 10, 0.12);
  --border-strong: rgba(20, 16, 10, 0.2);
  --border-panel: rgba(20, 16, 10, 0.14);

  --text-primary: #1a1712;
  --text-secondary: #5a544a;
  --text-muted: #8a8378;
  --text-1: var(--text-primary);
  --text-2: var(--text-secondary);
  --text-3: var(--text-muted);

  --suk-orange: #ea580c;
  --suk-orange-hot: #dc4e05;
  --suk-orange-2: #fb923c;
  --suk-orange-deep: #c2410c;
  --suk-orange-gradient: linear-gradient(180deg, #fb923c 0%, #ea580c 60%, #dc4e05 100%);
  --suk-orange-soft: rgba(234, 88, 12, 0.1);
  --suk-orange-line: rgba(234, 88, 12, 0.32);
  --suk-orange-glow: rgba(234, 88, 12, 0.16);
  --text-on-orange: #ffffff;

  --shadow-sm: 0 1px 0 rgba(20, 16, 10, 0.06);
  --shadow-md: 0 10px 28px rgba(20, 16, 10, 0.1);
  --shadow-lg: 0 22px 56px rgba(20, 16, 10, 0.14);
  --shadow-pop: 0 4px 16px rgba(20, 16, 10, 0.1);

  --page-glow-1: radial-gradient(800px 420px at -6% -10%, rgba(234, 88, 12, 0.06), transparent 62%);
  --page-glow-2: radial-gradient(700px 480px at 110% 0%, rgba(184, 115, 51, 0.05), transparent 60%);
  --grid-line: rgba(20, 16, 10, 0.05);
}