/* ============================================================
   TRASIX DESIGN SYSTEM — Colors & Typography
   ============================================================ */

/* ── Fonts ─────────────────────────────────────────────────── */
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Thin.ttf');        font-weight: 100; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-ThinItalic.ttf');  font-weight: 100; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-ExtraLight.ttf');  font-weight: 200; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-ExtraLightItalic.ttf'); font-weight: 200; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Light.ttf');       font-weight: 300; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-LightItalic.ttf'); font-weight: 300; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Regular.ttf');     font-weight: 400; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Italic.ttf');      font-weight: 400; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Medium.ttf');      font-weight: 500; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-MediumItalic.ttf'); font-weight: 500; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBold.ttf');    font-weight: 600; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-SemiBoldItalic.ttf'); font-weight: 600; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Bold.ttf');        font-weight: 700; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-BoldItalic.ttf');  font-weight: 700; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-ExtraBold.ttf');   font-weight: 800; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-ExtraBoldItalic.ttf'); font-weight: 800; font-style: italic; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-Black.ttf');       font-weight: 900; font-style: normal; }
@font-face { font-family: 'Poppins'; src: url('../fonts/Poppins-BlackItalic.ttf'); font-weight: 900; font-style: italic; }

:root {

  /* ── Raw Color Palette ─────────────────────────────────── */

  /* Red — primary action / emphasis */
  --red-50:  #FFF0F0;
  --red-100: #FFD6D6;
  --red-200: #FFA8A8;
  --red-300: #FF6A6A;
  --red-400: #F24E6A;
  --red-500: #ED1642;   /* Action / emphasis — not the brand primary */
  --red-600: #C4102F;
  --red-700: #960B22;
  --red-800: #6B0F0F;
  --red-900: #450808;

  /* Neutrals — cool blue-grey, crystal light */
  --black:   #0F0F0F;
  --neutral-950: #1E2133;
  --neutral-900: #2D3142;   /* Primary text — dark charcoal-blue */
  --neutral-800: #3D4260;
  --neutral-700: #565B7A;
  --neutral-600: #6B7090;   /* Secondary text */
  --neutral-500: #8890A8;
  --neutral-400: #A8AECA;
  --neutral-300: #C8CEDF;
  --neutral-200: #DDE0EC;   /* Borders, dividers */
  --neutral-100: #F2F5FF;   /* Main canvas background */
  --neutral-50:  #F8FAFF;   /* Lighter surface */
  --white:   #FFFFFF;

  /* Purple — secondary accent, used more broadly than initially defined */
  --purple-100: #EDEAF8;
  --purple-200: #D0C8F0;
  --purple-300: #A89AE0;
  --purple-500: #6C5DD3;   /* Primary purple — Q4 badges, highlights, Tracy AI */
  --purple-700: #4D41A8;
  --purple-900: #2E2567;

  /* ── Semantic Color Tokens ─────────────────────────────── */

  /* Foreground */
  --fg-primary:   var(--neutral-900);   /* #2D3142 — dark charcoal-blue */
  --fg-secondary: var(--neutral-600);
  --fg-tertiary:  var(--neutral-400);
  --fg-disabled:  var(--neutral-300);
  --fg-inverse:   var(--white);
  --fg-accent:    var(--red-500);

  /* Background */
  --bg-canvas:    var(--neutral-100);   /* #F2F5FF */
  --bg-gradient:  linear-gradient(210deg, rgba(218,223,242,1) 0%, rgba(242,245,255,1) 20%, rgba(242,245,255,1) 50%, rgba(255,255,255,1) 82%, rgba(242,245,255,1) 100%);
  --bg-surface:   var(--neutral-50);    /* #F8FAFF — panels, cards */
  --bg-elevated:  var(--white);
  --bg-inverse:   var(--neutral-950);
  --bg-overlay:   rgba(30, 33, 51, 0.55);

  /* Border */
  --border-light:   var(--neutral-50);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-400);
  --border-focus:   var(--red-500);

  /* Interactive */
  --action-primary:         var(--red-500);
  --action-primary-hover:   var(--red-600);
  --action-primary-active:  var(--red-700);
  --action-secondary:       var(--neutral-900);
  --action-secondary-hover: var(--neutral-700);
  --action-ghost-hover:     var(--neutral-100);

  /* Status */
  --status-success: #2D8A4E;
  --status-warning: #C07C16;
  --status-error:   var(--red-500);
  --status-info:    #1B5FAD;

  /* ── Typography Tokens ─────────────────────────────────── */

  --font-sans: 'Poppins', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Size scale */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Weight scale */
  --weight-thin:       100;
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-medium:     500;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;
  --weight-black:      900;

  /* Line heights */
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.14em;

  /* ── Spacing Scale ─────────────────────────────────────── */
  --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;

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Glass / Liquid Effects ───────────────────────────── */
  --glass-bg:          rgba(255, 255, 255, 0.55);
  --glass-bg-strong:   rgba(255, 255, 255, 0.80);
  --glass-bg-subtle:   rgba(255, 255, 255, 0.30);
  --glass-border:      rgba(255, 255, 255, 0.60);
  --glass-border-soft: rgba(200, 206, 223, 0.40);
  --glass-blur:        blur(12px);
  --glass-blur-sm:     blur(6px);
  --glass-blur-lg:     blur(20px);
  --glass-shadow:      0 4px 24px rgba(108, 93, 211, 0.08), 0 1px 4px rgba(45, 49, 66, 0.06);
  --glass-shadow-lg:   0 8px 40px rgba(108, 93, 211, 0.12), 0 2px 8px rgba(45, 49, 66, 0.08);


  --shadow-xs: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08), 0 0 1px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.14), 0 4px 16px rgba(0,0,0,0.08);
}

/* ── Semantic Element Styles ─────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

h6 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

p {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-primary);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--neutral-100);
  color: var(--neutral-900);
  border-radius: var(--radius-sm);
}

code { padding: 2px 5px; }

pre {
  padding: var(--space-4);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

/* Label styles */
.label-lg { font-size: var(--text-md);   font-weight: var(--weight-medium);   letter-spacing: var(--tracking-normal); }
.label-md { font-size: var(--text-base); font-weight: var(--weight-medium);   letter-spacing: var(--tracking-normal); }
.label-sm { font-size: var(--text-sm);   font-weight: var(--weight-medium);   letter-spacing: var(--tracking-normal); }
.label-xs { font-size: var(--text-xs);   font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide);   text-transform: uppercase; }

/* Caption */
.caption { font-size: var(--text-sm); color: var(--fg-secondary); line-height: var(--leading-normal); }