/* Lucoze design tokens — source of truth.
 * Mirrors services/lucoze-design/portal/tokens.css.
 * Self-hosted fonts under /assets/lucoze_base/fonts/.
 * Light = :root, Dark = [data-theme="dark"].
 */

/* ── Fonts ─────────────────────────────────────── */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/manrope-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/manrope-700.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/manrope-800.woff2") format("woff2");
}

@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/inter-tight-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/inter-tight-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/inter-tight-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/inter-tight-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/inter-tight-800.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/jetbrains-mono-600.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/fraunces-400.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/lucoze_base/fonts/fraunces-600.woff2") format("woff2");
}

/* ── Tokens (light) ────────────────────────────── */

:root {
  /* Brand */
  --primary:        #c15f3c;
  --primary-hover:  #a8502f;
  --primary-soft:   #f7e8e0;
  --primary-tint:   #fdf3ee;
  --primary-deep:   #8a3f23;
  --primary-glow:   rgba(193, 95, 60, 0.18);

  /* Surface */
  --bg-app:      #f4f3ee;
  --bg-surface:  #fffdf7;
  --bg-elev:     #ffffff;
  --bg-sunken:   #ebe9e1;
  --bg-hover:    #efede5;
  --bg-active:   #e7e4d9;
  --bg-rail:     #f8f6f0;

  /* Ink (text) */
  --ink:        #1f1d1a;
  --ink-2:      #3a3733;
  --muted:      #6b6660;
  --faint:      #8a857e;
  --on-primary: #fffdf7;

  /* Borders */
  --border:        #e2e0d8;
  --border-light:  #ecebe3;
  --border-strong: #cdc9bf;
  --divider:       #ecebe3;

  /* Status */
  --success:      #2d8a4e;
  --success-soft: #e6f1ea;
  --warning:      #b08020;
  --warning-soft: #f6efdc;
  --danger:       #b1342a;
  --danger-soft:  #f7e2df;
  --info:         #2a5fa8;
  --info-soft:    #e3ecf6;

  /* Type families */
  --font-display: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter Tight", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-serif:   "Fraunces", "Source Serif 4", Georgia, serif;

  /* Type scale (product density) */
  --t-xxs:  11px;
  --t-xs:   12px;
  --t-sm:   13px;
  --t-base: 14px;
  --t-md:   15px;
  --t-lg:   17px;
  --t-xl:   20px;
  --t-2xl:  24px;
  --t-3xl:  30px;
  --t-4xl:  38px;
  --t-5xl:  48px;

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Shadow */
  --sh-xs:  0 1px 1px rgba(31, 29, 26, 0.04);
  --sh-sm:  0 1px 2px rgba(31, 29, 26, 0.06), 0 0 0 1px rgba(31, 29, 26, 0.04);
  --sh-md:  0 4px 12px rgba(31, 29, 26, 0.08), 0 1px 2px rgba(31, 29, 26, 0.05);
  --sh-lg:  0 14px 36px rgba(31, 29, 26, 0.12), 0 2px 4px rgba(31, 29, 26, 0.06);
  --sh-pop: 0 20px 50px rgba(31, 29, 26, 0.18);
}

/* ── Tokens (dark) ─────────────────────────────── */

[data-theme="dark"] {
  --primary:        #e07c5a;
  --primary-hover:  #ee8d6b;
  --primary-soft:   #3a241c;
  --primary-tint:   #28201b;
  --primary-deep:   #f0a17f;
  --primary-glow:   rgba(224, 124, 90, 0.22);

  --bg-app:      #161412;
  --bg-surface:  #1f1c19;
  --bg-elev:     #26221e;
  --bg-sunken:   #100e0c;
  --bg-hover:    #26221e;
  --bg-active:   #2c2823;
  --bg-rail:     #1a1815;

  --ink:        #f1ede5;
  --ink-2:      #d4cfc4;
  --muted:      #9a9388;
  --faint:      #6c6760;
  --on-primary: #1a1612;

  --border:        #2e2a25;
  --border-light:  #25221e;
  --border-strong: #3a352f;
  --divider:       #25221e;

  --success:      #5fb47f;
  --success-soft: #1b2a22;
  --warning:      #d4a14a;
  --warning-soft: #2a2418;
  --danger:       #d4675b;
  --danger-soft:  #2a1c19;
  --info:         #6a96d4;
  --info-soft:    #1b2230;

  --sh-xs:  0 1px 1px rgba(0, 0, 0, 0.5);
  --sh-sm:  0 1px 2px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --sh-md:  0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-lg:  0 14px 36px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  --sh-pop: 0 20px 50px rgba(0, 0, 0, 0.7);
}