/* =============================================================
   Brex Mobile Design System — colors_and_type.css
   Sourced from uploads/Brex_DESIGN.md
   ============================================================= */

/* Webfont: Inter (primary UI). Loaded from Google Fonts.
   Flecha is a proprietary type (Plau Type Foundry) and is not
   freely distributable. We substitute Instrument Serif from Google
   Fonts as the nearest editorial-display match (slightly
   condensed, distinctive). Replace with licensed Flecha files in
   /fonts/ when available. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* -----------------------------------------------------------
     COLORS — base tokens
     ----------------------------------------------------------- */
  --color-midnight-ink:   #000710;
  --color-action-orange:  #ff5900;
  --color-primary-text:   #000000;
  --color-paper-white:    #ffffff;
  --color-dark-charcoal:  #15191e; /* corrected from spec typo #15191 */
  --color-soft-gray:      #f3f3f7;
  --color-muted-slate:    #b9bbc6;
  --color-cool-stone:     #60646c;
  --color-ash-gray:       #6f737b;
  --color-silver-pine:    #8b8d98;

  /* Press / hover state derivatives (derived for mobile interaction) */
  --color-action-orange-pressed: #e65000;
  --color-surface-pressed:       rgba(0, 7, 16, 0.06);

  /* -----------------------------------------------------------
     SEMANTIC COLOR TOKENS
     ----------------------------------------------------------- */
  --fg-primary:    var(--color-primary-text);     /* default body */
  --fg-strong:     var(--color-dark-charcoal);    /* headings, nav */
  --fg-secondary:  var(--color-cool-stone);       /* supporting text */
  --fg-tertiary:   var(--color-ash-gray);         /* placeholder, hints */
  --fg-quiet:      var(--color-silver-pine);      /* inactive nav, dividers */
  --fg-disabled:   var(--color-muted-slate);

  --bg-page:       var(--color-paper-white);
  --bg-elevated:   var(--color-paper-white);
  --bg-band:       var(--color-soft-gray);        /* alternating sections */
  --bg-inverse:    var(--color-midnight-ink);     /* footer, dark hero */
  --fg-on-inverse: var(--color-paper-white);

  --accent:           var(--color-action-orange);
  --accent-pressed:   var(--color-action-orange-pressed);
  --on-accent:        var(--color-paper-white);

  --border-default:  var(--color-muted-slate);
  --border-strong:   var(--color-dark-charcoal);
  --border-quiet:    var(--color-soft-gray);

  /* -----------------------------------------------------------
     TYPOGRAPHY — families
     ----------------------------------------------------------- */
  --font-inter:  'Inter', ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-flecha: 'Instrument Serif', 'Flecha', Georgia, ui-serif, serif;

  --font-sans:   var(--font-inter);
  --font-serif:  var(--font-flecha);

  /* Weights */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;

  /* Type scale — sizes */
  --text-caption:    10px;
  --text-micro:      12px;
  --text-meta:       13px;
  --text-body:       14px;
  --text-body-lg:    16px;
  --text-heading-sm: 20px;
  --text-heading:    24px;
  --text-heading-lg: 36px;
  --text-display:    48px;
  --text-display-xl: 72px;

  /* Line heights */
  --leading-tight:   1.00;
  --leading-display: 1.11;
  --leading-heading: 1.20;
  --leading-snug:    1.33;
  --leading-normal:  1.43;
  --leading-body:    1.50;
  --leading-loose:   1.57;

  /* Tracking — negative for display per Brex spec */
  --tracking-heading-sm: -0.4px;
  --tracking-heading:    -0.48px;
  --tracking-heading-lg: -0.72px;
  --tracking-display:    -0.96px;
  --tracking-display-xl: -2.16px; /* -0.03em at 72px */

  /* OpenType features for Inter (per Brex spec) */
  --inter-feature-settings: "calt" 0, "cv01", "cv05" 0, "cv10",
                            "liga" 0, "ss01" 0, "ss03", "zero" 0;

  /* -----------------------------------------------------------
     SPACING — base unit 8px
     ----------------------------------------------------------- */
  --space-4:   4px;   /* sub-unit; small button padding */
  --space-8:   8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-72: 72px;
  --space-80: 80px;
  --space-160: 160px;

  --section-gap:   48px;
  --card-padding:  24px;
  --card-padding-lg: 32px;
  --element-gap:   12px;

  /* -----------------------------------------------------------
     RADII
     ----------------------------------------------------------- */
  --radius-0:        0px;     /* inputs */
  --radius-button:   6px;
  --radius-default:  6px;
  --radius-nav:     10px;
  --radius-card:    12px;
  --radius-pill:   999px;

  /* -----------------------------------------------------------
     ELEVATION — Brex avoids shadows on buttons/cards by default.
     Provided only for floating UI (modal, toast, sticky bar).
     ----------------------------------------------------------- */
  --shadow-none:   none;
  --shadow-sticky: 0 -1px 0 rgba(0, 7, 16, 0.06);
  --shadow-toast:  0 8px 24px rgba(0, 7, 16, 0.12);
  --shadow-modal:  0 24px 64px rgba(0, 7, 16, 0.18);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --duration-fast:    120ms;
  --duration-base:    180ms;
  --duration-slow:    280ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);

  /* -----------------------------------------------------------
     MOBILE — touch targets, safe areas, gutters
     ----------------------------------------------------------- */
  --touch-target-min: 44px;
  --page-gutter:      20px;     /* mobile side padding */
  --max-mobile:      480px;     /* design width cap */
  --status-bar:       env(safe-area-inset-top, 0px);
  --home-indicator:   env(safe-area-inset-bottom, 0px);
}

/* =============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================= */
html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-feature-settings: var(--inter-feature-settings);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-primary);
  margin: 0;
}

/* Display — reserved for hero moments. Flecha (serif) only. */
.display {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-display);
  letter-spacing: normal;
  color: var(--fg-strong);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-medium);
  color: var(--fg-strong);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-medium);
  color: var(--fg-strong);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
  color: var(--fg-strong);
  margin: 0;
}

h4, .h4, .label {
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--leading-snug);
  font-weight: var(--font-weight-medium);
  color: var(--fg-strong);
  margin: 0;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--fg-primary);
  margin: 0;
}

.body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}

.meta {
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eyebrow {
  font-size: var(--text-micro);
  line-height: var(--leading-snug);
  color: var(--fg-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: var(--font-weight-medium);
}

code, .code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
}

a {
  color: var(--fg-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

a:active { color: var(--accent); }