/* =========================================================================
   Fortec Design System — colors_and_type.css
   Monochrome-first fintech. Black/white core + restrained semantic accents.
   Based on EconoMe's shadcn/ui tokens (oklch), rebranded for Fortec.
   ========================================================================= */

/* ---------- Web fonts --------------------------------------------------- */
/* Inter = nearest Google Fonts match for Helvetica Neue (logo + UI).
   JetBrains Mono = nearest Google Fonts match for Geist Mono (numerics).
   SUBSTITUTION: if licensed Helvetica Neue / Geist are available,
   swap the @import block for local @font-face declarations. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* -------- Brand ------------------------------------------------------ */
  --fortec-black: #0A0A0A;          /* logo + primary ink */
  --fortec-white: #FFFFFF;
  --fortec-ink:   #0A0A0A;
  --fortec-paper: #FFFFFF;

  /* -------- Neutral ramp (warm-neutral, near-zero chroma) -------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;   /* app bg on light */
  --neutral-100: #F5F5F5;   /* secondary surfaces */
  --neutral-150: #EFEFEF;
  --neutral-200: #E5E5E5;   /* borders */
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;   /* muted fg */
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;
  --neutral-950: #0A0A0A;   /* = --fortec-black */

  /* -------- Semantic — financial signaling ---------------------------- */
  /* Gain / positive (bull).  */
  --fortec-gain:        #0B8F4C;
  --fortec-gain-soft:   #E8F5EC;
  --fortec-gain-ink:    #074D29;
  /* Loss / negative (bear). Same hue as destructive. */
  --fortec-loss:        #C8321A;
  --fortec-loss-soft:   #FCEBE7;
  --fortec-loss-ink:    #791D0F;
  /* Warning — pending / at-risk */
  --fortec-warn:        #B8710B;
  --fortec-warn-soft:   #FCF2E2;
  --fortec-warn-ink:    #6E4206;
  /* Info — neutral data accent */
  --fortec-info:        #1E4FD6;
  --fortec-info-soft:   #E8EEFD;
  --fortec-info-ink:    #142F80;

  /* -------- Chart palette (muted, print-safe) ------------------------- */
  --chart-1: #0A0A0A;   /* ink — primary series */
  --chart-2: #525252;   /* neutral-600 */
  --chart-3: #0B8F4C;   /* gain */
  --chart-4: #1E4FD6;   /* info */
  --chart-5: #B8710B;   /* warn */
  --chart-6: #C8321A;   /* loss */
  --chart-7: #A3A3A3;   /* grid */

  /* -------- Foreground / background aliases --------------------------- */
  --background:            var(--neutral-0);
  --foreground:            var(--neutral-950);
  --surface:               var(--neutral-0);
  --surface-muted:         var(--neutral-50);
  --surface-sunken:        var(--neutral-100);
  --surface-inverse:       var(--neutral-950);
  --foreground-inverse:    var(--neutral-0);

  --fg-1: var(--neutral-950);   /* primary text */
  --fg-2: var(--neutral-600);   /* secondary text */
  --fg-3: var(--neutral-400);   /* tertiary / placeholder */
  --fg-disabled: var(--neutral-300);

  --border:         var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-subtle:  var(--neutral-150);
  --input:          var(--neutral-200);
  --ring:           var(--neutral-400);

  /* shadcn-compatible aliases (so the kit's components keep working) */
  --card:                    var(--neutral-0);
  --card-foreground:         var(--neutral-950);
  --popover:                 var(--neutral-0);
  --popover-foreground:      var(--neutral-950);
  --primary:                 var(--neutral-950);
  --primary-foreground:      var(--neutral-0);
  --secondary:               var(--neutral-100);
  --secondary-foreground:    var(--neutral-950);
  --muted:                   var(--neutral-100);
  --muted-foreground:        var(--neutral-500);
  --accent:                  var(--neutral-100);
  --accent-foreground:       var(--neutral-950);
  --destructive:             var(--fortec-loss);
  --sidebar:                 var(--neutral-50);
  --sidebar-foreground:      var(--neutral-950);
  --sidebar-primary:         var(--neutral-950);
  --sidebar-primary-foreground: var(--neutral-0);
  --sidebar-accent:          var(--neutral-100);
  --sidebar-accent-foreground: var(--neutral-950);
  --sidebar-border:          var(--neutral-200);
  --sidebar-ring:            var(--neutral-400);

  /* -------- Typography ------------------------------------------------- */
  --font-sans: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-display: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-numeric: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* Type scale — informational-density-first. */
  --fs-display:   48px;   --lh-display: 1.05;  --tr-display: -0.035em;
  --fs-h1:        32px;   --lh-h1:      1.15;  --tr-h1:      -0.025em;
  --fs-h2:        24px;   --lh-h2:      1.2;   --tr-h2:      -0.02em;
  --fs-h3:        18px;   --lh-h3:      1.3;   --tr-h3:      -0.01em;
  --fs-body:      14px;   --lh-body:    1.5;   --tr-body:    0;
  --fs-body-lg:   16px;   --lh-body-lg: 1.5;   --tr-body-lg: 0;
  --fs-small:     13px;   --lh-small:   1.45;
  --fs-xs:        12px;   --lh-xs:      1.4;
  --fs-eyebrow:   11px;   --lh-eyebrow: 1.3;   --tr-eyebrow: 0.08em;
  --fs-code:      13px;   --lh-code:    1.5;

  /* -------- Radius ----------------------------------------------------- */
  --radius-xs:  2px;
  --radius-sm:  6px;
  --radius:     10px;   /* matches EconoMe's 0.625rem */
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* -------- Spacing — 4px base ---------------------------------------- */
  --space-0:  0;
  --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;
  --space-24: 96px;

  /* -------- Elevation — four-step shadow system ----------------------- */
  --shadow-xs: 0 1px 0 0 rgba(10, 10, 10, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(10, 10, 10, 0.06), 0 1px 1px -1px rgba(10, 10, 10, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(10, 10, 10, 0.08), 0 2px 4px -2px rgba(10, 10, 10, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(10, 10, 10, 0.12), 0 4px 8px -4px rgba(10, 10, 10, 0.06);
  --shadow-focus: 0 0 0 3px rgba(10, 10, 10, 0.12);

  /* -------- Motion ----------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --dur-1: 80ms;
  --dur-2: 140ms;
  --dur-3: 220ms;
  --dur-4: 320ms;
}

/* ---------- Dark surface override -------------------------------------- */
.fortec-dark,
[data-theme="dark"] {
  --background:           var(--neutral-950);
  --foreground:           var(--neutral-50);
  --surface:              #141414;
  --surface-muted:        #1A1A1A;
  --surface-sunken:       #0F0F0F;

  --fg-1: #FAFAFA;
  --fg-2: #A3A3A3;
  --fg-3: #737373;

  --border:        #262626;
  --border-strong: #404040;
  --border-subtle: #1F1F1F;
  --input:         #262626;
  --ring:          #525252;

  --card:                    #141414;
  --card-foreground:         #FAFAFA;
  --popover:                 #1A1A1A;
  --popover-foreground:      #FAFAFA;
  --primary:                 #FAFAFA;
  --primary-foreground:      #0A0A0A;
  --secondary:               #262626;
  --secondary-foreground:    #FAFAFA;
  --muted:                   #1F1F1F;
  --muted-foreground:        #A3A3A3;
  --accent:                  #262626;
  --accent-foreground:       #FAFAFA;
  --sidebar:                 #0F0F0F;
  --sidebar-foreground:      #FAFAFA;
  --sidebar-accent:          #1F1F1F;
  --sidebar-accent-foreground: #FAFAFA;
  --sidebar-border:          #262626;

  /* Gain/loss stay vivid on dark */
  --fortec-gain-soft:   rgba(11, 143, 76, 0.16);
  --fortec-loss-soft:   rgba(200, 50, 26, 0.18);
  --fortec-warn-soft:   rgba(184, 113, 11, 0.18);
  --fortec-info-soft:   rgba(30, 79, 214, 0.18);
}

/* ---------- Semantic base styles --------------------------------------- */
.fortec * {
  border-color: var(--border);
}
.fortec body,
.fortec {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11", "tnum";   /* numeric tabular */
}

/* Display + headings */
.fortec h1, .fortec .h1,
.fortec h2, .fortec .h2,
.fortec h3, .fortec .h3,
.fortec .display, .fortec .eyebrow {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

.fortec .display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-weight: var(--fw-black);
}
.fortec h1, .fortec .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--tr-h1);
  font-weight: var(--fw-bold);
}
.fortec h2, .fortec .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  font-weight: var(--fw-semibold);
}
.fortec h3, .fortec .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--tr-h3);
  font-weight: var(--fw-semibold);
}
.fortec p, .fortec .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.fortec .body-lg {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
}
.fortec small, .fortec .small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--fg-2);
}
.fortec .xs {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
.fortec .eyebrow {
  font-size: var(--fs-eyebrow);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--fg-2);
}
.fortec code, .fortec .mono, .fortec .num {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  font-feature-settings: "tnum", "zero";
}
.fortec .num { font-variant-numeric: tabular-nums; }

/* ---------- Utility helpers ------------------------------------------- */
.fortec .gain { color: var(--fortec-gain); }
.fortec .loss { color: var(--fortec-loss); }
.fortec .warn { color: var(--fortec-warn); }
.fortec .info { color: var(--fortec-info); }
.fortec .muted { color: var(--fg-2); }