/* =========================================================================
   Power Texas Design Tokens — colors_and_type.css
   Source of truth: reference/Master.md
   ========================================================================= */

/* ---- Webfonts (Google Fonts substitute — see README caveats) --------------
   Body / UI: Inter
   Display / Headings: Poppins (nearest match to the logo wordmark)
   Mono: JetBrains Mono
----------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLORS — Brand
     ============================================================ */
  --color-primary:       #19478c; /* Navy Blue */
  --color-secondary:     #c9253e; /* Crimson Red */
  --color-alternate-1:   #8a341d; /* Dark Brown-Red */
  --color-alternate-2:   #f38056; /* Coral Orange */

  /* Primary (Blue) Scale */
  --color-blue-100: #19478c;
  --color-blue-200: #1f55a8;
  --color-blue-300: #3a6eb8;
  --color-blue-400: #5a8ac8;
  --color-blue-500: #7aa6d8;
  --color-blue-600: #9abfe6;
  --color-blue-700: #bdd4ef;
  --color-blue-800: #deeaf8;

  /* Secondary (Red) Scale */
  --color-red-100: #8c0d24;
  --color-red-200: #c9253e;
  --color-red-300: #d94f67;
  --color-red-400: #e27085;
  --color-red-500: #eb99a8;
  --color-red-600: #f2bac4;
  --color-red-700: #f7d4da;
  --color-red-800: #fbeef0;

  /* Alternate 1 (Brown-Red) Scale */
  --color-brown-100: #8a341d;
  --color-brown-200: #a0402a;
  --color-brown-300: #b05a42;
  --color-brown-400: #bf7860;
  --color-brown-500: #cc9582;
  --color-brown-600: #d8b0a0;
  --color-brown-700: #e5ccc4;
  --color-brown-800: #f2e6e2;

  /* Alternate 2 (Orange) Scale */
  --color-orange-100: #d45a20;
  --color-orange-200: #e06830;
  --color-orange-300: #f38056;
  --color-orange-400: #f79a78;
  --color-orange-500: #fab49a;
  --color-orange-600: #fccfbc;
  --color-orange-700: #fde4d8;
  --color-orange-800: #fef3ee;

  /* Neutrals */
  --color-black:    #111111;
  --color-gray-900: #222222;
  --color-gray-800: #333333;
  --color-gray-700: #444444;
  --color-gray-600: #555555;
  --color-gray-500: #666666;
  --color-gray-400: #888888;
  --color-gray-300: #aaaaaa;
  --color-gray-200: #cccccc;
  --color-gray-100: #e5e5e5;
  --color-gray-50:  #f0f0f0;
  --color-white:    #ffffff;

  /* State / Semantic */
  --color-error:    #c9253e;
  --color-success:  #2a8b4b;   /* added; harmonizes with palette */
  --color-warning:  #f38056;
  --color-focus:    #19478c;
  --color-disabled: #cccccc;

  /* ============================================================
     SEMANTIC SURFACES
     ============================================================ */
  --bg-page:         #ffffff;
  --bg-muted:        #f0f0f0;       /* gray-50 */
  --bg-elevated:     #ffffff;
  --bg-inverse:      #19478c;       /* navy */
  --bg-brand-soft:   #deeaf8;       /* blue-800 */
  --bg-accent-soft:  #fbeef0;       /* red-800 */

  --fg-default:      #222222;       /* gray-900 */
  --fg-muted:        #555555;       /* gray-600 */
  --fg-subtle:       #888888;       /* gray-400 */
  --fg-inverse:      #ffffff;
  --fg-brand:        #19478c;
  --fg-accent:       #c9253e;
  --fg-link:         #19478c;
  --fg-link-hover:   #1f55a8;

  --border-default:  #cccccc;
  --border-muted:    #e5e5e5;
  --border-strong:   #333333;
  --border-brand:    #19478c;
  --border-focus:    #19478c;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:     'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display:  'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type scale — base type sizes (line-height via --lh-*) */
  --fs-display-lg: 92px;   --lh-display-lg: 120px;
  --fs-display-md: 72px;   --lh-display-md: 96px;
  --fs-display-sm: 56px;   --lh-display-sm: 72px;
  --fs-h1:         40px;   --lh-h1:         48px;
  --fs-h2:         32px;   --lh-h2:         40px;
  --fs-h3:         28px;   --lh-h3:         36px;
  --fs-h4:         24px;   --lh-h4:         32px;
  --fs-h5:         20px;   --lh-h5:         28px;
  --fs-h6:         18px;   --lh-h6:         26px;
  --fs-p-lg:       18px;   --lh-p-lg:       28px;
  --fs-p-md:       16px;   --lh-p-md:       24px;
  --fs-p-sm:       14px;   --lh-p-sm:       20px;
  --fs-p-xs:       12px;   --lh-p-xs:       16px;
  --fs-label-lg:   14px;   --lh-label-lg:   20px;
  --fs-label-md:   12px;   --lh-label-md:   16px;
  --fs-label-sm:   11px;   --lh-label-sm:   14px;
  --fs-label-xs:   10px;   --lh-label-xs:   14px;
  --fs-mono-lg:    16px;
  --fs-mono-md:    14px;
  --fs-mono-sm:    12px;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.08em;

  /* ============================================================
     SPACING (4px base)
     ============================================================ */
  --space-0:  0;
  --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;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ============================================================
     SHADOWS
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06), 0 1px 3px rgba(17, 17, 17, 0.08);
  --shadow-md: 0 4px 8px rgba(17, 17, 17, 0.06), 0 8px 24px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 8px 16px rgba(17, 17, 17, 0.08), 0 24px 48px rgba(17, 17, 17, 0.12);
  --shadow-focus: 0 0 0 3px rgba(25, 71, 140, 0.25);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.2, 0.0, 0, 1);
  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --dur-fast:   120ms;
  --dur-med:    200ms;
  --dur-slow:   320ms;
}

/* =========================================================================
   BASE ELEMENT STYLES — drop-in semantic defaults
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-default);
  background: var(--bg-page);
  font-size: var(--fs-p-md);
  line-height: var(--lh-p-md);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
.display-lg, .display-md, .display-sm {
  font-family: var(--font-display);
  color: var(--fg-default);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}

.display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: var(--fw-bold); }
.display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); font-weight: var(--fw-bold); }
.display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); font-weight: var(--fw-bold); }

h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium); }
h5, .h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: var(--fw-regular); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: var(--fw-regular); text-transform: uppercase; letter-spacing: var(--tracking-caps); }

p, .p-md { font-size: var(--fs-p-md); line-height: var(--lh-p-md); margin: 0; }
.p-lg { font-size: var(--fs-p-lg); line-height: var(--lh-p-lg); }
.p-sm { font-size: var(--fs-p-sm); line-height: var(--lh-p-sm); }
.p-xs { font-size: var(--fs-p-xs); line-height: var(--lh-p-xs); }

.label-lg { font-size: var(--fs-label-lg); line-height: var(--lh-label-lg); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); }
.label-md { font-size: var(--fs-label-md); line-height: var(--lh-label-md); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.label-sm { font-size: var(--fs-label-sm); line-height: var(--lh-label-sm); font-weight: var(--fw-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-md);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

hr {
  border: none;
  border-top: 1px solid var(--border-muted);
  margin: var(--space-6) 0;
}

::selection {
  background: var(--color-blue-700);
  color: var(--color-blue-100);
}