/* =========================================================================
   Klyxor — Colors & Type
   Source: Figma file "Klyxor — Design System"
   ========================================================================= */

/* Fonts — primary stack is Sora (UI/body) + Manrope (headings/display)
   with Raleway for the brand wordmark and Geist Mono for code/tabular.
   Weights loaded via @font-face (local) with Google Fonts as fallback. */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Raleway:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ------- Brand wordmark ------- */
  --klyxor-ink: #0B1628;       /* "Kly" + "or" — deep navy from logo */
  --klyxor-gold: #D4A017;      /* the "y" + "x" accent in wordmark */

  /* ------- Sapphire (primary) — the Klyxor blue scale ------- */
  --sapphire-50:  #F0F5FF;
  --sapphire-100: #DCE9FF;
  --sapphire-200: #B8D0FF;
  --sapphire-300: #8AB4FF;
  --sapphire-400: #5B94FF;
  --sapphire-500: #2461DB;
  --sapphire-600: #1A56DB;     /* brand blue, primary CTA */
  --sapphire-700: #1540A8;
  --sapphire-800: #091E52;
  --sapphire-900: #050F2C;
  --sapphire-950: #030818;

  /* ------- Gold (accent) — indexation / KPI / pedigree ------- */
  --gold-50:  #FDF4DC;
  --gold-100: #FAF0CC;
  --gold-200: #F5E090;
  --gold-300: #EDCA50;
  --gold-400: #DFB020;
  --gold-500: #D4A017;          /* brand gold */
  --gold-600: #B8860B;
  --gold-700: #9A6F08;
  --gold-800: #7A5500;
  --gold-900: #3D2900;

  /* ------- Success (green) ------- */
  --success-50:  #F2FCF6;
  --success-100: #E1F9EA;
  --success-200: #C1F5D5;
  --success-300: #98F1B9;
  --success-400: #66EA97;
  --success-500: #1DCF5F;
  --success-600: #16A34A;
  --success-700: #127B39;
  --success-800: #0D3F1F;
  --success-900: #092514;

  /* ------- Error (red) ------- */
  --error-50:  #FCF3F3;
  --error-100: #F9E2E2;
  --error-200: #F4C3C3;
  --error-300: #EF9A9A;
  --error-400: #E76A6A;
  --error-500: #E25353;
  --error-600: #DC2626;
  --error-700: #A71D1D;
  --error-800: #561414;
  --error-900: #320E0E;

  /* ------- Warning (amber) ------- */
  --warning-50:  #F0EDEA;
  --warning-100: #E8DFD4;
  --warning-200: #E4CBAF;
  --warning-300: #E5B176;
  --warning-400: #F09022;
  --warning-500: #D97706;
  --warning-600: #784407;
  --warning-700: #533008;
  --warning-800: #301D07;

  /* ------- Info (blue, alt) ------- */
  --info-50:  #E0E8FB;
  --info-100: #BFD1F8;
  --info-200: #94B2F5;
  --info-300: #608DF0;
  --info-400: #5384EE;
  --info-500: #2563EB;
  --info-600: #1348BC;
  --info-700: #11378A;
  --info-800: #0F2960;
  --info-900: #0C1A38;

  /* ------- Neutrals (from the kit's slate/grey scale) ------- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FAFBFD;     /* app background tint */
  --neutral-50:   #F4F7FC;
  --neutral-100:  #EEF3FB;
  --neutral-200:  #D4DCEA;
  --neutral-300:  #B8C8D8;
  --neutral-400:  #94A2B8;     /* muted text */
  --neutral-500:  #7A95B0;     /* secondary text */
  --neutral-600:  #64748B;
  --neutral-700:  #3A5068;
  --neutral-800:  #1B3659;
  --neutral-900:  #091628;     /* primary ink */
  --neutral-950:  #0D1B2E;     /* sidebar dark nav */

  /* ------- Semantic surface / text tokens ------- */
  --bg-app: var(--neutral-25);
  --bg-surface: var(--neutral-0);
  --bg-subtle: var(--neutral-50);
  --bg-muted: var(--neutral-100);
  --bg-selected: #EEF3FB;               /* row hover / selected */
  --bg-sidebar-dark: var(--neutral-950);
  --bg-sidebar-light: var(--neutral-0);

  --fg-primary: var(--neutral-900);     /* #091628 */
  --fg-secondary: var(--neutral-500);   /* #7A95B0 */
  --fg-muted: var(--neutral-400);
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-muted: #4A6080;          /* rgb(74,96,128) sidebar mutes */
  --fg-brand: var(--sapphire-600);
  --fg-link: var(--sapphire-600);

  --border-default: var(--neutral-200); /* #D4DCEA */
  --border-strong: var(--neutral-300);
  --border-focus: var(--sapphire-600);
  --border-on-dark: #4A6080;

  --ring: 0 0 0 3px rgba(26,86,219,0.18);

  /* ------- Radii ------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-pill: 9999px;

  /* ------- Shadows (from /Shadows frame) ------- */
  --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --shadow-card: 0 2px 8px 0 rgba(0,0,0,0.06);  /* tableau / card */

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

  /* ------- Motion ------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ------- Type families ------- */
  --font-display: "Manrope", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-ui:      "Sora", "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-wordmark:"Raleway", var(--font-display);
  --font-mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* =========================================================================
   Base type styles
   ========================================================================= */

html { color: var(--fg-primary); font-family: var(--font-ui); }
body { margin: 0; background: var(--bg-app); -webkit-font-smoothing: antialiased; }

.k-wordmark {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.010em;
  line-height: 1;
  color: var(--klyxor-ink);
}
.k-wordmark .x { color: var(--klyxor-gold); }
.k-wordmark .y { color: var(--klyxor-gold); }

/* Headings use Manrope; body uses Sora */

.h1, h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 48px; line-height: 1; letter-spacing: -0.010em;
  color: var(--fg-primary); margin: 0;
}
.h2, h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.1; letter-spacing: -0.005em;
  color: var(--fg-primary); margin: 0;
}
.h3, h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.2;
  color: var(--fg-primary); margin: 0;
}
.h4, h4 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; line-height: 1.25;
  color: var(--fg-primary); margin: 0;
}
.eyebrow {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 11px; line-height: 1; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-secondary);
}

/* Paragraph scale */
.p-lg         { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; font-weight: 400; color: var(--fg-primary); }
.p-lg-medium  { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--fg-primary); }
.p-lg-bold    { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; font-weight: 700; color: var(--fg-primary); }

.p, p         { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--fg-primary); margin: 0; }
.p-medium     { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--fg-primary); }
.p-bold       { font-family: var(--font-ui); font-size: 14px; line-height: 1.5; font-weight: 700; color: var(--fg-primary); }

.p-sm         { font-family: var(--font-ui); font-size: 12px; line-height: 1.33; font-weight: 400; color: var(--fg-secondary); }
.p-sm-medium  { font-family: var(--font-ui); font-size: 12px; line-height: 1.33; font-weight: 500; color: var(--fg-secondary); }

.p-mini       { font-family: var(--font-ui); font-size: 11px; line-height: 1.4; font-weight: 400; color: var(--fg-secondary); }
.p-mini-medium{ font-family: var(--font-ui); font-size: 11px; line-height: 1.4; font-weight: 500; color: var(--fg-secondary); }
.p-mini-bold  { font-family: var(--font-ui); font-size: 11px; line-height: 1.4; font-weight: 700; color: var(--fg-secondary); }

.caption      { font-family: var(--font-ui); font-size: 10px; line-height: 1.4; font-weight: 600;
                letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-secondary); }

.mono         { font-family: var(--font-mono); font-size: 14px; line-height: 1.45;
                color: var(--fg-primary); font-variant-numeric: tabular-nums; }

/* Tabular numbers helper — used everywhere in tables, KPIs, dashboards */
.num-tab { font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }

/* Small utility: link */
.link { color: var(--fg-link); text-decoration: none; }
.link:hover { text-decoration: underline; }