/* ============================================================
   TRABA DESIGN SYSTEM — Colors & Typography Tokens
   Derived directly from "2026 Design System.fig" Atoms page.
   ============================================================ */

/* Montserrat via Google Fonts — must come first per CSS @import rules */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Montserrat:wght@500;600;700&display=swap");

/* ---------- Fonts (local brand files) ---------- */
:root {
  /* =========================================================
     BASE
     ========================================================= */
  --t-white: #ffffff;
  --t-black: #000000;

  /* =========================================================
     GRAY / NEUTRAL (UI scale)
     ========================================================= */
  --t-gray-50:  #ffffff;
  --t-gray-100: #f6f8fa;
  --t-gray-200: #eef2f6;
  --t-gray-300: #e4e9f0;
  --t-gray-400: #ccd4de;
  --t-gray-500: #a9b3c2;
  --t-gray-600: #8893a7;
  --t-gray-700: #667286;
  --t-gray-800: #475164;
  --t-gray-900: #2c3342;
  --t-gray-950: #141821;

  /* =========================================================
     DAWN — Brand primary (violet)
     Brand key is Dawn 70 (#8000FF)
     ========================================================= */
  --t-dawn-0:   #fcf7ff;
  --t-dawn-10:  #f5ebff;
  --t-dawn-20:  #e9d3ff;
  --t-dawn-30:  #d7b0ff;
  --t-dawn-40:  #be87ff;
  --t-dawn-50:  #a864ff;
  --t-dawn-60:  #9136ff;
  --t-dawn-70:  #8000ff;   /* BRAND */
  --t-dawn-80:  #6a00d6;
  --t-dawn-90:  #5200a6;
  --t-dawn-100: #3d0b6e;

  /* =========================================================
     MIDNIGHT — Brand secondary (deep blue)
     Brand key is Midnight 90 (#08105E)
     ========================================================= */
  --t-midnight-0:   #f7faff;
  --t-midnight-10:  #e9edff;
  --t-midnight-20:  #d8deff;
  --t-midnight-30:  #bbc5ff;
  --t-midnight-40:  #94a3f5;
  --t-midnight-50:  #6d82da;
  --t-midnight-60:  #4c60b3;
  --t-midnight-70:  #2e4496;
  --t-midnight-80:  #1a2a75;
  --t-midnight-90:  #08105e;   /* BRAND */
  --t-midnight-100: #050a3e;

  /* =========================================================
     SEMANTIC — Red (Error), Orange (Attention),
                Yellow (Progress), Green (Success), Blue (Info)
     ========================================================= */
  --t-red-0:   #fffbf9;
  --t-red-10:  #fff0f4;
  --t-red-20:  #fdf3f7;
  --t-red-30:  #fbd3e7;
  --t-red-40:  #f79fb0;
  --t-red-50:  #f47a8c;
  --t-red-60:  #f04b6f;
  --t-red-70:  #f20d59;    /* primary red */
  --t-red-80:  #c41a47;
  --t-red-90:  #9f1432;
  --t-red-100: #7a0f28;

  --t-orange-0:   #fffcf9;
  --t-orange-10:  #fff6ed;
  --t-orange-20:  #feebdc;
  --t-orange-30:  #fdd9be;
  --t-orange-40:  #fdc38f;
  --t-orange-50:  #fca855;
  --t-orange-60:  #f8883c;
  --t-orange-70:  #f57316;   /* orange accent (logo arc) */
  --t-orange-80:  #c24a14;
  --t-orange-90:  #9a3a0f;
  --t-orange-100: #80310f;

  --t-yellow-0:   #fffffb;
  --t-yellow-10:  #fffdf1;
  --t-yellow-20:  #fef7e2;
  --t-yellow-30:  #fdefc9;
  --t-yellow-40:  #fde8a8;
  --t-yellow-50:  #fdcd3a;
  --t-yellow-60:  #fac71a;
  --t-yellow-70:  #e0c000;   /* yellow accent */
  --t-yellow-80:  #c09000;
  --t-yellow-90:  #a07600;
  --t-yellow-100: #8c6a00;

  --t-green-0:   #f7fefa;
  --t-green-10:  #f1f9f3;
  --t-green-20:  #ccf6bd;
  --t-green-30:  #98e590;
  --t-green-40:  #64d188;
  --t-green-50:  #3ebc73;
  --t-green-60:  #1ab273;   /* success */
  --t-green-70:  #16995e;
  --t-green-80:  #10733a;
  --t-green-90:  #0f5c2a;
  --t-green-100: #0f4f2c;

  --t-blue-0:   #f7faff;
  --t-blue-10:  #eef3ff;
  --t-blue-20:  #dce0fd;
  --t-blue-30:  #bcc8ff;
  --t-blue-40:  #8899ff;
  --t-blue-50:  #4d6eff;
  --t-blue-60:  #2555ff;
  --t-blue-70:  #005bbf;   /* info */
  --t-blue-80:  #0048a3;
  --t-blue-90:  #013880;
  --t-blue-100: #012a5c;

  /* =========================================================
     MARKETING — Magenta & Teal (marketing surfaces only)
     ========================================================= */
  --t-magenta-0:   #fff9fc;
  --t-magenta-10:  #fdf4f8;
  --t-magenta-20:  #fbe8f1;
  --t-magenta-30:  #f7d1e3;
  --t-magenta-40:  #f1a9cb;
  --t-magenta-50:  #ea7eb0;
  --t-magenta-60:  #e25593;
  --t-magenta-70:  #db2777;
  --t-magenta-80:  #af1a69;
  --t-magenta-90:  #8c1453;

  --t-teal-0:   #f7fefd;
  --t-teal-10:  #eef9f8;
  --t-teal-20:  #ddf5f3;
  --t-teal-30:  #bdebe8;
  --t-teal-40:  #93e0dc;
  --t-teal-50:  #68d4cf;
  --t-teal-60:  #42c4be;
  --t-teal-70:  #17b3ad;
  --t-teal-80:  #169993;
  --t-teal-90:  #0f6762;

  /* =========================================================
     SEMANTIC — foreground / background / border
     ========================================================= */
  --t-fg-primary:    var(--t-midnight-90);   /* #08105E */
  --t-fg-secondary:  #66788a;                /* slate for secondary copy */
  --t-fg-tertiary:   #7a8a99;
  --t-fg-disabled:   var(--t-gray-500);
  --t-fg-inverse:    var(--t-white);
  --t-fg-brand:      var(--t-dawn-70);

  --t-bg-canvas:     var(--t-white);
  --t-bg-surface:    #fbfbfb;
  --t-bg-muted:      #f7f7f8;
  --t-bg-subtle:     var(--t-gray-100);
  --t-bg-brand:      var(--t-dawn-70);
  --t-bg-brand-soft: var(--t-dawn-10);
  --t-bg-inverse:    var(--t-midnight-90);

  --t-border-default: #e2e5e9;   /* most common border */
  --t-border-subtle:  var(--t-gray-200);
  --t-border-strong:  var(--t-gray-400);
  --t-border-brand:   var(--t-dawn-70);
  --t-border-focus:   var(--t-dawn-60);

  /* =========================================================
     SHADOW / ELEVATION
     ========================================================= */
  --t-shadow-xs: 0 1px 2px rgba(8, 16, 94, 0.06);
  --t-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --t-shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.02), 0 12px 16px -4px rgba(0, 0, 0, 0.08);
  --t-shadow-lg: 0 12px 24px -4px rgba(8, 16, 94, 0.12), 0 6px 10px -4px rgba(8, 16, 94, 0.08);
  --t-shadow-xl: 0 24px 48px -12px rgba(8, 16, 94, 0.18);
  /* Signature "stamp" shadow used on marketing buttons + cards */
  --t-shadow-stamp: 5px 5px 0 0 var(--t-midnight-90);

  /* =========================================================
     RADII
     ========================================================= */
  --t-radius-xs: 4px;
  --t-radius-sm: 6px;
  --t-radius-md: 8px;
  --t-radius-lg: 10px;
  --t-radius-xl: 12px;
  --t-radius-2xl: 16px;
  --t-radius-3xl: 24px;
  --t-radius-pill: 999px;

  /* =========================================================
     SPACING (4px grid)
     ========================================================= */
  --t-space-1: 4px;
  --t-space-2: 8px;
  --t-space-3: 12px;
  --t-space-4: 16px;
  --t-space-5: 20px;
  --t-space-6: 24px;
  --t-space-8: 32px;
  --t-space-10: 40px;
  --t-space-12: 48px;
  --t-space-16: 64px;
  --t-space-20: 80px;

  /* =========================================================
     MOTION
     ========================================================= */
  --t-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-ease-emphasized: cubic-bezier(0.4, 0, 0.2, 1);
  --t-dur-fast: 120ms;
  --t-dur-base: 180ms;
  --t-dur-slow: 280ms;

  /* =========================================================
     TYPOGRAPHY — families
     ========================================================= */
  --t-font-primary: "Poppins", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-font-display: "Montserrat", "Poppins", system-ui, sans-serif;
  --t-font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* ============================================================
   Semantic type styles — matches Figma scale
   Display M, S / Heading XL, L, M, S, XS / Body L, M, S / Tag M, S
   ============================================================ */
html, body { font-family: var(--t-font-primary); color: var(--t-fg-primary); }

.t-display-m, h1.t-display-m {
  font-family: var(--t-font-primary);
  font-weight: 700; font-size: 60px; line-height: 72px; letter-spacing: -0.01em;
  color: var(--t-fg-primary);
}
.t-display-s {
  font-family: var(--t-font-primary);
  font-weight: 700; font-size: 48px; line-height: 60px; letter-spacing: -0.01em;
  color: var(--t-fg-primary);
}
.t-heading-xl, h1 {
  font-family: var(--t-font-primary);
  font-weight: 700; font-size: 40px; line-height: 52px; letter-spacing: -0.008em;
  color: var(--t-fg-primary);
}
.t-heading-l, h2 {
  font-family: var(--t-font-primary);
  font-weight: 600; font-size: 32px; line-height: 40px; letter-spacing: -0.006em;
  color: var(--t-fg-primary);
}
.t-heading-m, h3 {
  font-family: var(--t-font-primary);
  font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: -0.004em;
  color: var(--t-fg-primary);
}
.t-heading-s, h4 {
  font-family: var(--t-font-primary);
  font-weight: 600; font-size: 20px; line-height: 28px; letter-spacing: -0.004em;
  color: var(--t-fg-primary);
}
.t-heading-xs, h5 {
  font-family: var(--t-font-primary);
  font-weight: 600; font-size: 16px; line-height: 24px; color: var(--t-fg-primary);
}
.t-body-l { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--t-fg-primary); }
.t-body-m, p { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--t-fg-primary); }
.t-body-s { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--t-fg-secondary); }
.t-tag-m {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--t-fg-secondary);
}
.t-tag-s {
  font-size: 10px; line-height: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t-fg-secondary);
}
.t-mono { font-family: var(--t-font-mono); font-size: 13px; line-height: 20px; }