/* ============================================================
   AXIOM — Design Tokens
   Compliance SaaS · professional / corporate / sharp / polished
   ============================================================ */

/* ---------- Fonts (Google Fonts substitutes — flag to user) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

:root {
  /* ===== Color · Brand ===== */
  --color-navy-950: #0F1A26;   /* near-black navy, used for hero/dark */
  --color-navy-900: #1A2C40;   /* primary brand navy (Stripe-like) */
  --color-navy-800: #243A55;
  --color-navy-700: #2F4A68;
  --color-navy-600: #3C5A7D;

  --color-blue-700: #2B80AC;
  --color-blue-600: #3399CC;   /* primary action blue */
  --color-blue-500: #52A8D4;
  --color-blue-400: #79BEDF;
  --color-blue-300: #A6D3EA;
  --color-blue-200: #C9E2F1;
  --color-blue-100: #D9E6F8;
  --color-blue-50:  #EFF6FB;

  /* ===== Color · Neutrals (cool slate) ===== */
  --color-slate-950: #0A1220;
  --color-slate-900: #0F1A2E;
  --color-slate-800: #1B2640;
  --color-slate-700: #2C3856;
  --color-slate-600: #4A5876;
  --color-slate-500: #6B7A99;
  --color-slate-400: #8492AE;
  --color-slate-300: #B0BCD1;
  --color-slate-200: #D3DAE6;
  --color-slate-150: #E1E6EE;
  --color-slate-100: #ECEFF5;
  --color-slate-75:  #F2F4F8;
  --color-slate-50:  #F6F8FB;
  --color-white:     #FFFFFF;

  /* ===== Color · Semantic ===== */
  --color-success-700: #0B6B47;
  --color-success-600: #0F8C5C;
  --color-success-100: #E1F4EC;

  --color-warning-700: #8A5A14;
  --color-warning-600: #B8761A;
  --color-warning-100: #FBEFD8;

  --color-danger-700:  #97243A;
  --color-danger-600:  #C0334B;
  --color-danger-100:  #FBE3E7;

  --color-info-700:    var(--color-blue-700);
  --color-info-600:    var(--color-blue-600);
  --color-info-100:    var(--color-blue-100);

  /* ===== Color · Semantic tokens (light) ===== */
  --bg-canvas:      #F6F8FB;        /* app shell */
  --bg-surface:     #FFFFFF;        /* cards / panels */
  --bg-sunken:      #ECEFF5;        /* inputs, code blocks */
  --bg-elevated:    #FFFFFF;        /* popovers, menus */
  --bg-inverse:     #1A2C40;        /* dark blocks within light UI */

  --fg-1:           #1A2C40;        /* primary text / headings */
  --fg-2:           #4A5876;        /* secondary text / labels */
  --fg-3:           #6B7A99;        /* tertiary / metadata */
  --fg-4:           #8492AE;        /* placeholder / disabled */
  --fg-on-inverse:  #FFFFFF;
  --fg-on-brand:    #FFFFFF;
  --fg-link:        #1F6184;       /* darkened brand blue for AA text contrast on white */

  --border-subtle:  #ECEFF5;
  --border-default: #D3DAE6;
  --border-strong:  #B0BCD1;
  --border-focus:   #3399CC;
  --border-inverse: #2C3856;

  --brand-primary:        #1A2C40;
  --brand-primary-hover:  #243A55;
  --brand-primary-press:  #0F1A26;
  --brand-accent:         #3399CC;
  --brand-accent-hover:   #2B80AC;
  --brand-accent-press:   #1F6184;
  --brand-accent-soft:    #D9E6F8;

  /* ===== Typography · Families ===== */
  --font-sans:    'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* ===== Typography · Scale (modular, ~1.18) ===== */
  --fs-12: 0.75rem;   /* 12 */
  --fs-13: 0.8125rem; /* 13 */
  --fs-14: 0.875rem;  /* 14 */
  --fs-15: 0.9375rem; /* 15 */
  --fs-16: 1rem;      /* 16 */
  --fs-18: 1.125rem;  /* 18 */
  --fs-20: 1.25rem;   /* 20 */
  --fs-24: 1.5rem;    /* 24 */
  --fs-28: 1.75rem;   /* 28 */
  --fs-32: 2rem;      /* 32 */
  --fs-40: 2.5rem;    /* 40 */
  --fs-48: 3rem;      /* 48 */
  --fs-56: 3.5rem;    /* 56 */
  --fs-72: 4.5rem;    /* 72 */

  /* ===== Typography · Weights ===== */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ===== Typography · Line heights ===== */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ===== Typography · Letter spacing ===== */
  --ls-tighter: -0.03em;   /* display */
  --ls-tight:   -0.018em;  /* large headings */
  --ls-normal:  -0.005em;
  --ls-wide:    0.02em;
  --ls-caps:    0.08em;    /* uppercase eyebrows */

  /* ===== Spacing (4px base) ===== */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ===== Radii ===== */
  --radius-none: 0;
  --radius-xs:   3px;     /* badges, inline tags */
  --radius-sm:   5px;     /* buttons, inputs */
  --radius-md:   8px;     /* cards */
  --radius-lg:   12px;    /* modals, large surfaces */
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ===== Borders ===== */
  --bw-hairline: 1px;
  --bw-strong:   1.5px;
  --bw-focus:    2px;

  /* ===== Shadows (cool, low-opacity, restrained) ===== */
  --shadow-xs:   0 1px 0 rgba(26, 44, 64, 0.04);
  --shadow-sm:   0 1px 2px rgba(26, 44, 64, 0.06), 0 1px 0 rgba(26, 44, 64, 0.03);
  --shadow-md:   0 4px 10px -2px rgba(26, 44, 64, 0.08), 0 2px 4px -1px rgba(26, 44, 64, 0.04);
  --shadow-lg:   0 16px 32px -8px rgba(26, 44, 64, 0.14), 0 4px 8px -2px rgba(26, 44, 64, 0.06);
  --shadow-xl:   0 28px 56px -16px rgba(26, 44, 64, 0.22), 0 8px 16px -4px rgba(26, 44, 64, 0.08);
  --shadow-focus: 0 0 0 3px rgba(51, 153, 204, 0.20);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  /* ===== Motion ===== */
  --ease-standard:  cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-page:    520ms;

  /* ===== Z-index ===== */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;

  /* ===== Layout ===== */
  --content-narrow: 720px;
  --content-base:   1080px;
  --content-wide:   1280px;
  --content-max:    1440px;
}

/* ============================================================
   Semantic type roles
   ============================================================ */

.t-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-72);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-56);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--fg-1);
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-40);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}
.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}
.t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-15);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  font-feature-settings: "ss01", "cv11";
}
.t-serif {
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  font-style: italic;
  color: var(--fg-1);
}

/* ============================================================
   Shared base
   ============================================================ */
.ax-base {
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}