/* == tokens/fonts.css == */
/* FindTxOpps webfonts — synced to the shipped product (Replit final, Aug 2026).
   Poppins is the single brand face: display, headlines and interface alike (300–700).
   IBM Plex Mono remains the proof voice: codes, dates, verification stamps, data labels. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{
  --font-display:"Poppins",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-sans:"Poppins",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
}

/* == tokens/colors.css == */
/* FindTxOpps palette. Base ramps first, semantic aliases second.
   Derived from the platform logo (navy Texas silhouette, river-blue accent, orange star)
   and the "warm ivory + deep navy + river blue + strategic orange" direction. */
:root{
  /* Navy — the institutional voice */
  --navy-900:#0B2338;
  --navy-800:#0F2B44;
  --navy-700:#12314F;
  --navy-600:#1B3B5F;
  --navy-500:#234C77;
  --navy-300:#5A7794;

  /* River blue — interactive, links, data */
  --river-700:#215A87;
  --river-600:#2A6A9C;
  --river-500:#2E77B0;
  --river-400:#5C9AC9;
  --river-300:#8FBADB;
  --river-100:#DCE9F3;
  --river-050:#EDF4F9;

  /* Orange — strategic accent only: deadlines, the star, one CTA per view */
  --orange-700:#B65313;
  --orange-600:#D66716;
  --orange-500:#EE7A1E;
  --orange-400:#F59B4F;
  --orange-100:#FBE6D2;
  --orange-050:#FDF3E9;

  /* Warm neutrals — ivory paper stock */
  --ivory-050:#FEFCF8;
  --ivory-100:#FBF7F0;
  --ivory-200:#F5EFE4;
  --ivory-300:#EDE4D5;
  --ivory-400:#DDD1BE;
  --ivory-500:#C6B8A2;

  /* Cool greys — interface text */
  --slate-900:#14202B;
  --slate-700:#374553;
  --slate-500:#5E6C7A;
  --slate-400:#7C8996;
  --slate-300:#A6B0BA;
  --slate-200:#D3D9DE;

  /* Semantic status */
  --green-600:#1E7A52;
  --green-100:#DCEDE4;
  --amber-600:#A9700D;
  --amber-100:#F7EBD2;
  --red-600:#AE2A20;
  --red-100:#F6DFDC;

  /* ---- Semantic aliases: use these in components ---- */
  --surface-canvas:var(--ivory-100);
  --surface-paper:#FFFFFF;
  --surface-raised:var(--ivory-050);
  --surface-sunken:var(--ivory-200);
  --surface-navy:var(--navy-700);
  --surface-navy-deep:var(--navy-900);
  --surface-navy-elevated:var(--navy-600);
  --surface-river-wash:var(--river-050);
  --surface-orange-wash:var(--orange-050);

  --text-display:var(--navy-800);
  --text-heading:var(--navy-700);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-500);
  --text-faint:var(--slate-400);
  --text-on-navy:var(--ivory-100);
  --text-on-navy-muted:var(--river-300);
  --text-on-accent:#FFFFFF;
  --text-link:var(--river-600);
  --text-link-hover:var(--navy-700);

  --accent-primary:var(--navy-900);
  --accent-interactive:var(--river-500);
  --accent-strategic:var(--orange-500);

  --border-hairline:var(--ivory-300);
  --border-strong:var(--ivory-400);
  --border-cool:var(--slate-200);
  --border-focus:var(--river-500);

  --status-open-fg:var(--green-600);
  --status-open-bg:var(--green-100);
  --status-soon-fg:var(--orange-700);
  --status-soon-bg:var(--orange-100);
  --status-warn-fg:var(--amber-600);
  --status-warn-bg:var(--amber-100);
  --status-closed-fg:var(--red-600);
  --status-closed-bg:var(--red-100);
  --status-info-fg:var(--river-700);
  --status-info-bg:var(--river-100);
}

/* == tokens/typography.css == */
/* Type scale. Serif for editorial voice, sans for interface, mono for verifiable facts. */
:root{
  --text-hero:clamp(2.75rem,5vw,4.25rem);   /* 44 -> 68px, serif 600 */
  --text-display:3rem;   /* 48 */
  --text-h1:2.25rem;     /* 36 */
  --text-h2:1.75rem;     /* 28 */
  --text-h3:1.375rem;    /* 22 */
  --text-h4:1.125rem;    /* 18 */
  --text-lede:1.1875rem; /* 19 */
  --text-body:1rem;      /* 16 */
  --text-sm:0.875rem;    /* 14 */
  --text-xs:0.8125rem;   /* 13 */
  --text-micro:0.6875rem;/* 11 */

  --leading-tight:1.08;
  --leading-display:1.16;
  --leading-snug:1.35;
  --leading-body:1.6;
  --leading-loose:1.72;

  --tracking-hero:-0.015em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-eyebrow:0.16em;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
}

/* == tokens/spacing.css == */
/* 4px base unit. Compact by intent: this is an intelligence tool, not a landing page. */
:root{
  --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;
  --gutter:var(--space-6);
  --card-pad:var(--space-5);
  --card-pad-lg:var(--space-6);
  --section-y:var(--space-16);
  --section-y-lg:var(--space-20);
  --container-max:1240px;
  --container-narrow:720px;
  --measure:68ch;
  --control-h:40px;
  --control-h-lg:48px;
  --touch-min:44px;
}

/* == tokens/shape.css == */
:root{
  --radius-none:0px;
  --radius-xs:2px;
  --radius-sm:3px;   /* default for controls, chips, inputs */
  --radius-md:4px;   /* cards, panels */
  --radius-lg:6px;   /* modals, big feature panels */
  --radius-pill:999px;
  --radius-full:50%;
  --rule-hairline:1px;
  --rule-emphasis:2px;
  --rule-editorial:3px; /* the navy rule under editorial section heads */
}

/* == tokens/elevation.css == */
/* Depth synced to the shipped product: soft navy-tinted shadows, lift on card hover. */
:root{
  --shadow-none:none;
  --shadow-sm:0 1px 2px rgba(11,35,56,.05);
  --shadow-card:0 2px 8px rgba(11,35,56,.08);
  --shadow-raised:0 8px 24px rgba(11,35,56,.12);
  --shadow-lift:0 12px 32px rgba(11,35,56,.08);
  --shadow-overlay:0 12px 32px rgba(11,35,56,.16),0 2px 6px rgba(11,35,56,.08);
  --shadow-focus:0 0 0 3px rgba(46,119,176,.28);
}

/* == tokens/motion.css == */
:root{
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.25,1); /* @kind other */
  --dur-instant:90ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
}

/* == tokens/base.css == */
/* Minimal element defaults. Consumers get these for free with styles.css. */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-canvas);color:var(--text-body);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-semibold);line-height:var(--leading-display);letter-spacing:var(--tracking-normal);margin:0 0 var(--space-3)}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}h4{font-size:var(--text-h4);font-family:var(--font-sans);font-weight:var(--weight-semibold)}
p{margin:0 0 var(--space-4);max-width:var(--measure)}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
code,kbd,samp{font-family:var(--font-mono);font-size:.9em}
hr{border:0;border-top:var(--rule-hairline) solid var(--border-hairline);margin:var(--space-8) 0}
::selection{background:var(--orange-100);color:var(--navy-800)}