/* =======================================================================
   Rewize Design System — Colors & Type
   Source of truth: rewize-web/src/css/style.css + tailwind.config.cjs
   ======================================================================= */

/* ---------- FONTS (Satoshi primary, RobotoMono secondary) --------------- */
/* Substituted from Fontshare + Google Fonts — replace with .woff2 files in
   fonts/ if the originals are licensed for your use case. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500;700&family=Fira+Mono:wght@400;500;700&display=swap");

/* Logo font — user-supplied. Used ONLY in the Rewize wordmark lockup.
   Not for UI, body, hero or section titles. */
@font-face {
  font-family: "Conthrax";
  src: url("fonts/conthrax.sb-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- FONT FAMILIES ----- */
  --font-sans: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", "Fira Mono", ui-monospace, "SFMono-Regular", monospace;
  --font-display: "Conthrax", "Satoshi", system-ui, sans-serif;

  /* ----- BASE (LIGHT) ---- */
  /* Core */
  --black: hsl(21 83% 5%);
  --black-hover: hsl(21 40% 13%);
  --white: hsl(0 0% 100%);
  --white-hover: hsl(0 0% 90%);

  /* Foreground (selected/primary action) */
  --foreground: var(--black);
  --foreground-text: var(--white);
  --foreground-hover: var(--black-hover);

  /* Surface / elevation */
  --surface: hsl(18 100% 99%);
  --box-50:  hsl(18 95% 98.5%);
  --box-100: hsl(18 60% 97.5%);
  --box-200: hsl(18 50% 96.5%);
  --box-300: hsl(18 48% 95.5%);
  --box-400: hsl(18 44% 94.5%);
  --box-500: hsl(18 40% 94%);
  --box-600: hsl(18 35% 93.5%);
  --box-700: hsl(18 32% 92.5%);
  --box-800: hsl(18 28% 90%);
  --box-900: hsl(18 24% 85%);
  --box-accent: hsl(29 50% 95%);
  --accent-box-from: hsla(301, 52%, 82%, 0.4);
  --accent-box-to:   hsla(259, 59%, 82%, 0.4);

  /* Strokes */
  --stroke:        hsl(39 32% 91%);
  --stroke-strong: hsl(35 35% 85%);
  --stroke-subtle: hsl(35 20% 95%);

  /* Text hierarchy */
  --text:        hsl(27 5% 28%);
  --text-2:      hsl(27 12% 58%);
  --text-3:      hsl(27 14% 72%);
  --placeholder: hsl(27 14% 72%);

  /* ---- Brand signature: warm orange primary, cool blue secondary ---- */
  --primary-100: hsl(29 80% 94%);
  --primary-200: hsl(29 80% 88%);
  --primary-500: hsl(29 80% 66%);       /* #E5A068 → brand orange */
  --primary:     var(--primary-500);
  --primary-bg:  hsl(29 80% 66% / 10%);
  --primary-border: hsl(29 80% 66% / 20%);

  --secondary:        hsl(224 91% 66%);  /* blue — sales series */
  --secondary-bg:     hsl(224 91% 66% / 10%);
  --secondary-border: hsl(224 91% 66% / 20%);

  /* Semantic */
  --success:        hsl(134 37% 59%);
  --success-bg:     hsl(134 37% 59% / 10%);
  --success-border: hsl(134 37% 59% / 20%);
  --warning:        hsl(38 100% 52%);
  --warning-bg:     hsl(38 100% 52% / 10%);
  --warning-border: hsl(38 100% 52% / 20%);
  --danger:         hsl(352 63% 54%);
  --danger-bg:      hsl(352 63% 54% / 10%);
  --danger-border:  hsl(352 63% 54% / 20%);

  /* Inventory statuses (unique to Rewize domain) */
  --status-healthy:    hsl(134 37% 59%);
  --status-reorder:    hsl(29 80% 63%);
  --status-atrisk:     hsl(18 67% 56%);
  --status-outofstock: hsl(349 76% 58%);
  --status-overdue:    hsl(349 50% 45%);
  --status-overstock:  hsl(306 21% 38%);

  /* Order statuses */
  --status-draft:     hsl(45 87% 64%);
  --status-approved:  hsl(181 48% 68%);
  --status-sent:      hsl(228 100% 80%);
  --status-confirmed: hsl(134 37% 59%);
  --status-cancelled: hsl(21 13% 70%);

  /* Background gradient — the "warm-to-cool" Rewize hallmark */
  --background-gradient: linear-gradient(
    to bottom right,
    hsl(39, 45%, 76%),
    hsl(294, 71%, 86%)
  );
  --light-gradient: linear-gradient(to bottom right, #F7F1F9, #FEF3EA);
  --dark-gradient:  linear-gradient(to bottom right, #2C2115, #09050c);
  --rewize-gradient: linear-gradient(
    to bottom right,
    rgba(229, 160, 104, 0.15),
    rgba(233, 203, 242, 0.15)
  );

  /* Shadows (from tailwind config) */
  --shadow-default: 0px 8px 13px -3px rgba(0, 0, 0, 0.07);
  --shadow-card:    0px 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-card-2:  0px 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-1: 0px 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-4: 0px 4px 10px rgba(0, 0, 0, 0.12);
  --shadow-6: 0px 3px 15px rgba(0, 0, 0, 0.1);

  /* Radii — Rewize uses generous rounding on cards, pills on status */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;    /* card-small */
  --radius-2xl: 24px;   /* card-medium */
  --radius-3xl: 32px;   /* default Card */
  --radius-4xl: 40px;   /* large card */
  --radius-pill: 9999px;

  /* Spacing (custom tailwind additions) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Type scale — titles come from tailwind config */
  --font-size-xxs: 9px;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-base: 16px;
  --font-size-title-xsm: 18px;
  --font-size-title-sm:  20px;
  --font-size-title-md:  24px;
  --font-size-title-lg:  28px;
  --font-size-title-xl:  36px;
  --font-size-title-xxl: 44px;
  --line-xxs: 11px;
  --line-xl:  45px;
  --line-xxl: 55px;

  /* Transitions */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 500ms ease;
}

/* ----- DARK MODE ----- */
.dark, [data-theme="dark"] {
  --surface: hsl(21 81% 5%);
  --foreground: var(--white);
  --foreground-text: var(--black);
  --foreground-hover: var(--white-hover);

  --box-50:  hsl(21 70% 5.8%);
  --box-100: hsl(21 64% 7%);
  --box-200: hsl(21 52% 8%);
  --box-300: hsl(21 49% 8.75%);
  --box-400: hsl(21 46% 9.5%);
  --box-500: hsl(21 41% 11%);
  --box-600: hsl(21 34% 13%);
  --box-700: hsl(21 30% 15.5%);
  --box-800: hsl(21 25% 18.5%);
  --box-900: hsl(21 21% 22%);

  --accent-box-from: hsla(35, 53%, 26%, 0.4);
  --accent-box-to:   hsla(36, 4%, 23%, 0.4);

  --stroke:        hsl(21 23% 12%);
  --stroke-strong: hsl(21 25% 15%);
  --stroke-subtle: hsl(21 20% 10%);

  --text:        hsl(15 40% 87%);
  --text-2:      hsl(15 25% 64%);
  --text-3:      hsl(15 16% 44%);
  --placeholder: hsl(15 16% 44%);

  --background-gradient: linear-gradient(to bottom right, #2c2115, #110320);
}

/* ===================== BASE / SEMANTIC TAG STYLES ===================== */

html, body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--surface);
  font-size: var(--font-size-base);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 { font: 700 var(--font-size-title-xl)/1.2 var(--font-sans); color: var(--black); letter-spacing: -0.01em; }
h2 { font: 700 var(--font-size-title-lg)/1.25 var(--font-sans); color: var(--black); letter-spacing: -0.01em; }
h3 { font: 700 var(--font-size-title-md)/1.3 var(--font-sans); color: var(--black); }
h4 { font: 700 var(--font-size-title-xsm)/1.35 var(--font-sans); color: var(--text); letter-spacing: 0.01em; }
h5 { font: 700 var(--font-size-base)/1.4 var(--font-sans); color: var(--text); letter-spacing: 0.01em; }
h6 { font: 500 var(--font-size-sm)/1.4 var(--font-sans); color: var(--text); letter-spacing: 0.02em; }
.dark h1, .dark h2, .dark h3 { color: var(--white); }

p { color: var(--text); font-size: var(--font-size-base); line-height: 1.55; }
small { font-size: var(--font-size-sm); color: var(--text-2); }
b, strong { font-weight: 500; }
code, pre, .mono { font-family: var(--font-mono); font-size: 0.92em; }

/* Convenience classes */
.text-display { font: 700 var(--font-size-title-xxl)/var(--line-xxl) var(--font-sans); letter-spacing: -0.02em; color: var(--black); }
.text-title-xl  { font: 700 var(--font-size-title-xl)/var(--line-xl) var(--font-sans); }
.text-title-lg  { font: 700 var(--font-size-title-lg)/1.25 var(--font-sans); }
.text-title-md  { font: 700 var(--font-size-title-md)/1.25 var(--font-sans); }
.text-title-sm  { font: 600 var(--font-size-title-sm)/1.3 var(--font-sans); }
.text-title-xsm { font: 600 var(--font-size-title-xsm)/1.35 var(--font-sans); }
.text-body   { font: 400 var(--font-size-base)/1.5 var(--font-sans); color: var(--text); }
.text-body-sm { font: 400 var(--font-size-sm)/1.45 var(--font-sans); color: var(--text); }
.text-caption { font: 500 var(--font-size-xs)/1.4 var(--font-sans); color: var(--text-2); letter-spacing: 0.02em; }
.text-mono   { font-family: var(--font-mono); font-size: var(--font-size-sm); color: var(--text); }
.text-muted  { color: var(--text-2); }
.text-faint  { color: var(--text-3); }

/* Signature utilities */
.glass {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--stroke-subtle);
  box-shadow: 0 0 0 1px var(--stroke-subtle);
}
.rewize-gradient-border {
  background: var(--rewize-gradient);
  border: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
}
.card {
  background: var(--surface);
  border: 1px solid var(--stroke-subtle);
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-default);
  padding: 24px;
}
.card-sm { border-radius: var(--radius-xl); padding: 16px; box-shadow: var(--shadow-card-2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 3px;
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}