/* =============================================================
   RedTrac Design System — Foundation Tokens
   Import this file before redtrac-components.css.
   All variables use --rt-* prefix to avoid Bootstrap conflicts.
   ============================================================= */

@font-face {
  font-family: 'BebasNeue';
  src: url('../webfonts/BebasNeue.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ---------- Brand color ---------- */
  --rt-red:              #E43C39;
  --rt-red-hover:        #E85957;
  --rt-red-active:       #E96361;
  --rt-red-deep:         #c9302c;
  --rt-red-emphasis:     #5B1817;
  --rt-red-subtle:       #FAD8D7;
  --rt-red-border-subtle:#F4B1B0;

  /* ---------- Neutrals ---------- */
  --rt-bg-app:           #212529;
  --rt-bg-container:     #59626a;
  --rt-bg-surface:       #ffffff;
  --rt-bg-surface-2:     #f8f9fa;
  --rt-bg-muted:         #8A8E91;
  --rt-bg-tile:          #c3c3c3;
  --rt-bg-dark:          #343a40;

  --rt-fg:               #000000;
  --rt-fg-strong:        #212529;
  --rt-fg-muted:         #6c757d;
  --rt-fg-soft:          #999999;
  --rt-fg-on-dark:       #ffffff;
  --rt-fg-on-dark-muted: rgba(255,255,255,0.5);

  --rt-border:           #dee2e6;
  --rt-border-strong:    #000000;
  --rt-divider:          #eeeeee;

  /* ---------- Secondary / form ---------- */
  --rt-secondary:        #f2f2f2;
  --rt-secondary-text:   #616161;
  --rt-secondary-hover:  #F4F4F4;
  --rt-secondary-active: #F5F5F5;

  /* ---------- Status semantics ---------- */
  --rt-success:          #198754;
  --rt-success-bg:       #d1e7dd;
  --rt-warning:          #e8a817;
  --rt-warning-bg:       #fff3cd;
  --rt-warning-fg:       #b88a00;
  --rt-danger:           var(--rt-red);
  --rt-danger-bg:        #fff3f3;
  --rt-info:             #0dcaf0;

  /* ---------- Table & interaction ---------- */
  --rt-bg-zebra:         #f8f9fa;
  --rt-bg-hover:         #f0f1f3;

  /* ---------- Type stacks ---------- */
  --rt-font-body:        'Albert Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --rt-font-display:     'BebasNeue', 'Oswald', 'Albert Sans', sans-serif;
  --rt-font-mono:        ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --rt-fs-xs:    0.75rem;
  --rt-fs-sm:    0.875rem;
  --rt-fs-base:  1rem;
  --rt-fs-md:    1.125rem;
  --rt-fs-lg:    1.25rem;
  --rt-fs-xl:    1.5rem;
  --rt-fs-2xl:   1.75rem;
  --rt-fs-3xl:   2.5rem;
  --rt-fs-4xl:   3rem;

  --rt-lh-tight: 1.15;
  --rt-lh-snug:  1.35;
  --rt-lh-body:  1.5;

  --rt-fw-light: 300;
  --rt-fw-reg:   400;
  --rt-fw-med:   500;
  --rt-fw-semi:  600;
  --rt-fw-bold:  700;
  --rt-fw-black: 800;

  /* ---------- Radii ---------- */
  --rt-radius-xs:   4px;
  --rt-radius-sm:   5px;
  --rt-radius-md:   8px;
  --rt-radius-lg:   10px;
  --rt-radius-xl:   12px;
  --rt-radius-pill: 999px;

  /* ---------- Spacing ---------- */
  --rt-space-1: 0.25rem;
  --rt-space-2: 0.5rem;
  --rt-space-3: 0.75rem;
  --rt-space-4: 1rem;
  --rt-space-5: 1.25rem;
  --rt-space-6: 1.5rem;
  --rt-space-8: 2rem;
  --rt-space-10: 2.5rem;
  --rt-space-12: 3rem;

  /* ---------- Shadows ---------- */
  --rt-shadow-sm:  0 1px 2px rgba(0,0,0,0.08);
  --rt-shadow:     0 2px 4px rgba(0,0,0,0.2);
  --rt-shadow-md:  0 4px 6px rgba(0,0,0,0.4);
  --rt-shadow-lg:  0 6px 12px rgba(0,0,0,0.5);
  --rt-shadow-pulse: 0 4px 20px rgba(228, 60, 57, 0.5);

  /* ---------- Motion ---------- */
  --rt-ease:       ease;
  --rt-dur-fast:   0.15s;
  --rt-dur-base:   0.2s;
  --rt-dur-slow:   0.3s;
}

/* ---------- Semantic type helpers ---------- */

.rt-body {
  font-family: var(--rt-font-body);
  font-size: var(--rt-fs-base);
  line-height: var(--rt-lh-body);
  color: var(--rt-fg);
  -webkit-font-smoothing: antialiased;
}

.rt-h1 { font-family: var(--rt-font-body); font-size: 2rem; font-weight: var(--rt-fw-bold); line-height: var(--rt-lh-tight); margin: 0 0 var(--rt-space-4); }
.rt-h2 { font-family: var(--rt-font-body); font-size: var(--rt-fs-2xl); font-weight: var(--rt-fw-semi); line-height: var(--rt-lh-tight); margin: 0 0 var(--rt-space-4); }
.rt-h3 { font-family: var(--rt-font-body); font-size: 1.5rem; font-weight: var(--rt-fw-semi); line-height: var(--rt-lh-snug); margin: 0 0 var(--rt-space-3); }
.rt-h4 { font-family: var(--rt-font-body); font-size: var(--rt-fs-xl); font-weight: var(--rt-fw-semi); line-height: var(--rt-lh-snug); margin: 0 0 var(--rt-space-3); }
.rt-h5 { font-family: var(--rt-font-body); font-size: var(--rt-fs-lg); font-weight: var(--rt-fw-semi); line-height: var(--rt-lh-snug); margin: 0 0 var(--rt-space-3); }
.rt-h6 { font-family: var(--rt-font-body); font-size: var(--rt-fs-base); font-weight: var(--rt-fw-semi); line-height: var(--rt-lh-snug); margin: 0 0 var(--rt-space-2); }

.rt-eyebrow {
  font-size: var(--rt-fs-xs);
  font-weight: var(--rt-fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rt-fg-muted);
}

.rt-wordmark {
  font-family: var(--rt-font-display);
  font-weight: 800;
  font-size: var(--rt-fs-3xl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rt-red);
}