/* ==========================================================================
   Bantokens Design System - Unified Tokens (Local Fonts & Variables)
   ========================================================================== */

/* Segoe UI — Local Fonts */
@font-face {
  font-family: 'segoe-ui';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/segoe-ui-400.woff2') format('woff2');
}
@font-face {
  font-family: 'segoe-ui';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/segoe-ui-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'segoe-ui';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/segoe-ui-700.woff2') format('woff2');
}
@font-face {
  font-family: 'segoe-ui';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/segoe-ui-700-italic.woff2') format('woff2');
}

/* Roboto Mono — Local Fonts */
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/roboto-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Colors - Base Palette */
  --blue-tint: #E5F1FF;
  --blue-light: #99C9FF;
  --blue-secondary: #4DA5FF;
  --blue-primary: #007DFF;
  --blue-primary-hover: #0069DB;
  --blue-primary-press: #0055B0;
  --blue-deep: #00489A;
  --blue-deep-2: #00356F;
  --navy-deep: var(--blue-deep);
  --navy-deep-2: var(--blue-deep-2);
  --black: #000000;
  --gray-900: #212529;
  --gray-700: #495057;
  --gray-500: #868e96;
  --gray-300: #dee2e6;
  --gray-100: #f4f6fb;
  --white: #FFFFFF;
  --amber-token: #FDBA02;
  --amber-token-deep: #F2A600;
  --amber-token-bg: #FFF4D6;
  --green-success: #16a34a;
  --green-success-bg: #e7f8ee;
  --whatsapp-green: #25D366;
  --red-danger: #e0333f;
  --red-danger-bg: #fdeaec;
  --amber-warning: #f59e0b;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-primary) 100%);
  --gradient-deep: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-deep-2) 100%);
  --gradient-navy: var(--gradient-deep);

  /* Semantic Color Aliases */
  --color-accent: var(--blue-primary);
  --color-accent-hover: var(--blue-primary-hover);
  --color-accent-press: var(--blue-primary-press);
  --color-accent-soft: var(--blue-secondary);
  --color-token: var(--amber-token);
  --surface-page: var(--white);
  --surface-page-alt: var(--gray-100);
  --surface-card: var(--white);
  --surface-dark: var(--blue-deep);
  --surface-brand: var(--blue-primary);
  --surface-brand-soft: var(--blue-tint);
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-700);
  --text-muted: var(--gray-500);
  --text-inverse: var(--white);
  --text-link: var(--blue-primary);
  --text-link-hover: var(--blue-primary-hover);
  --border-subtle: var(--gray-300);
  --border-strong: var(--gray-500);
  --border-focus: var(--blue-primary);
  --status-success-fg: var(--green-success);
  --status-success-bg: var(--green-success-bg);
  --status-danger-fg: var(--red-danger);
  --status-danger-bg: var(--red-danger-bg);
  --status-warning-fg: #92620a;
  --status-warning-bg: #fef3d9;

  /* Typography */
  --font-sans: 'segoe-ui', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, Menlo, monospace;
  --fw-regular: 400;
  --fw-medium: 400;
  --fw-semibold: 700;
  --fw-bold: 700;
  --fw-black: 700;
  --fs-display-xl: 64px;
  --fs-display-l: 48px;
  --fs-display-m: 36px;
  --fs-h1: 58px;
  --fs-h2: 35px;
  --fs-h3: 20px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-caption: 12px;
  --lh-tight: 1.1;
  --lh-heading: 1.25;
  --lh-body: 1.55;
  --ls-tight: -0.01em;
  --ls-wide: 0.04em;

  /* Spacing */
  --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;
  --container-max: 1200px;
  --content-max: 720px;

  /* Effects */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --shadow-card: 0 1px 2px rgba(13, 22, 68, .06), 0 4px 16px rgba(13, 22, 68, .08);
  --shadow-float: 0 8px 24px rgba(13, 22, 68, .16), 0 2px 6px rgba(13, 22, 68, .10);
  --shadow-fab: 0 6px 16px rgba(38, 38, 252, .35);
  --shadow-inset-focus: 0 0 0 3px rgba(38, 38, 252, .18);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
}

/* Base Typography Styles */
body {
  font-family: var(--font-sans);
  line-height: var(--lh-body);
  color: var(--text-primary);
}
h1, h2, h3, h4, h5, h6 {
  line-height: var(--lh-heading);
}
h1 {
  font-size: clamp(36px, 5.5vw, 58px);
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
}