/* =========================================================================
   Cedra — Colors & Type
   Brand palette derived from the Cedra leaf-mark logo.
   Navy #000232 · Orange #FF851B · Off-white #F7F7FF
   ========================================================================= */

/* --- Fonts ----------------------------------------------------------------
   Brand font: Afacad (locally hosted in fonts/).
   - Display + UI + body all use Afacad — geometric, soft, slightly tall.
     Weights: 400 / 500 / 600 / 700 (Bold is the max — no 800/900).
   - Mono / receipts: JetBrains Mono (still loaded from Google Fonts CDN).
   -------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap");

@font-face { font-family: "Afacad"; font-style: normal;  font-weight: 400; src: url("fonts/Afacad-Regular.ttf")        format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: italic;  font-weight: 400; src: url("fonts/Afacad-Italic.ttf")         format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: normal;  font-weight: 500; src: url("fonts/Afacad-Medium.ttf")         format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: italic;  font-weight: 500; src: url("fonts/Afacad-MediumItalic.ttf")   format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: normal;  font-weight: 600; src: url("fonts/Afacad-SemiBold.ttf")       format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: italic;  font-weight: 600; src: url("fonts/Afacad-SemiBoldItalic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: normal;  font-weight: 700; src: url("fonts/Afacad-Bold.ttf")           format("truetype"); font-display: swap; }
@font-face { font-family: "Afacad"; font-style: italic;  font-weight: 700; src: url("fonts/Afacad-BoldItalic.ttf")     format("truetype"); font-display: swap; }

:root {
  /* ---- Brand core ------------------------------------------------------ */
  --cedra-navy:        #000232;   /* primary surface on dark, primary text on light */
  --cedra-navy-700:    #0a0d4a;
  --cedra-navy-500:    #1e2270;
  --cedra-orange:      #ff851b;   /* accent / CTA */
  --cedra-orange-600:  #e8730f;
  --cedra-orange-500:  #ff9a3d;
  --cedra-orange-100:  #ffe8d2;
  --cedra-off-white:   #f7f7ff;   /* light surfaces */
  --cedra-paper:       #ffffff;

  /* ---- Neutrals (warm-cool blend tuned to navy) ------------------------ */
  --gray-50:  #f7f7fb;
  --gray-100: #eeeef5;
  --gray-200: #dcdce8;
  --gray-300: #c2c2d2;
  --gray-400: #9999ad;
  --gray-500: #6e6e84;
  --gray-600: #4d4d63;
  --gray-700: #2f2f47;
  --gray-800: #1a1a30;
  --gray-900: #0a0a22;

  /* ---- Semantic — light theme (default) -------------------------------- */
  --bg:           var(--cedra-off-white);
  --surface:      var(--cedra-paper);
  --surface-2:    var(--gray-50);
  --surface-sunk: var(--gray-100);

  --fg-1: var(--cedra-navy);     /* primary text */
  --fg-2: var(--gray-700);       /* secondary text */
  --fg-3: var(--gray-500);       /* tertiary / hint */
  --fg-on-accent: #ffffff;

  --border:        var(--gray-200);
  --border-strong: var(--gray-300);

  --accent:        var(--cedra-orange);
  --accent-hover:  var(--cedra-orange-600);
  --accent-soft:   var(--cedra-orange-100);

  /* ---- Status ---------------------------------------------------------- */
  --success: #16a34a;
  --success-soft: #dcfce7;
  --warning: #f59e0b;
  --warning-soft: #fef3c7;
  --danger:  #dc2626;
  --danger-soft: #fee2e2;
  --info:    #2563eb;
  --info-soft: #dbeafe;

  /* ---- Type scale (px-based, 16px root) -------------------------------- */
  --font-display: "Afacad", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans:    "Afacad", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-loose:  1.6;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    700; /* Afacad maxes out at Bold (700) */

  /* ---- Spacing (4px base) --------------------------------------------- */
  --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;
  --space-20: 80px;

  /* ---- Radii ---------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 2, 50, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 2, 50, 0.07), 0 1px 2px rgba(0, 2, 50, 0.04);
  --shadow-md: 0 8px 18px rgba(0, 2, 50, 0.08), 0 2px 4px rgba(0, 2, 50, 0.05);
  --shadow-lg: 0 18px 40px rgba(0, 2, 50, 0.14), 0 4px 10px rgba(0, 2, 50, 0.06);
  --shadow-glow-orange: 0 6px 24px rgba(255, 133, 27, 0.35);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out:    cubic-bezier(.16,.84,.32,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
}

/* ---- Dark theme (when applied to a region or root) -------------------- */
.theme-dark, [data-theme="dark"] {
  --bg:           var(--cedra-navy);
  --surface:      #0a0d4a;
  --surface-2:    #131642;
  --surface-sunk: #050626;

  --fg-1: var(--cedra-off-white);
  --fg-2: #c8c9d8;
  --fg-3: #8a8ca5;
  --fg-on-accent: #ffffff;

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  --shadow-sm: 0 2px 6px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 18px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 40px rgba(0,0,0,0.55);
}

/* =========================================================================
   Semantic type roles
   ========================================================================= */
.h-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.h1, h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}
.h2, h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-36);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.h3, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.h4, h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.body, p {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.body-sm, small {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
.numeric {
  font-variant-numeric: tabular-nums;
}