/* =========================================================================
   TechAMCs — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   All visual values are derived from the provided brand board.
   ========================================================================= */

/* Brand typefaces are bundled locally in fonts/. See fonts/README.md. */
@import url("./fonts/fonts.css");

:root {
  /* ---------------------------------------------------------------------
     CORE PALETTE — exact hex values from the brand board
     --------------------------------------------------------------------- */
  --color-navy:        #0D1B2A;   /* primary brand color, "structured" */
  --color-gold:        #C9972B;   /* accent, "accountability" */
  --color-slate:       #6B7280;   /* neutral text / icon */
  --color-paper:       #F2F4F7;   /* light surface, page background */
  --color-white:       #FFFFFF;
  --color-black:       #000000;

  /* ---------------------------------------------------------------------
     EXTENDED RAMPS — extrapolated from the four core hues for usable UI
     (tints/shades only; no new hues introduced)
     --------------------------------------------------------------------- */
  --navy-950: #050B14;
  --navy-900: #0D1B2A;   /* = core navy */
  --navy-800: #122438;
  --navy-700: #1B3149;
  --navy-600: #29456A;
  --navy-500: #3A5C87;
  --navy-400: #6B83A6;
  --navy-300: #9CADC6;
  --navy-200: #C7D2E0;
  --navy-100: #E3E9F0;
  --navy-050: #F1F4F8;

  --gold-900: #6E5316;
  --gold-800: #8C6A1F;
  --gold-700: #A88126;
  --gold-600: #C9972B;   /* = core gold */
  --gold-500: #D7A94C;
  --gold-400: #E2BC6E;
  --gold-300: #ECD192;
  --gold-200: #F4E1B5;
  --gold-100: #FAEFD4;
  --gold-050: #FDF8EB;

  --slate-900: #1F2937;
  --slate-800: #374151;
  --slate-700: #4B5563;
  --slate-600: #6B7280;   /* = core slate */
  --slate-500: #8A93A0;
  --slate-400: #A8AEB9;
  --slate-300: #C7CCD3;
  --slate-200: #DEE1E6;
  --slate-100: #ECEEF1;
  --slate-050: #F2F4F7;   /* = core paper */

  /* ---------------------------------------------------------------------
     SEMANTIC COLORS — what designers should actually reach for
     --------------------------------------------------------------------- */
  /* Foregrounds */
  --fg-1: var(--navy-900);          /* primary text on light */
  --fg-2: var(--slate-700);         /* secondary text */
  --fg-3: var(--slate-500);         /* tertiary / meta */
  --fg-disabled: var(--slate-300);
  --fg-on-navy: var(--color-white); /* primary text on navy */
  --fg-on-navy-2: var(--navy-200);  /* secondary text on navy */
  --fg-accent: var(--gold-700);     /* gold used as text on light bg (readable) */
  --fg-link: var(--gold-700);

  /* Backgrounds */
  --bg-page: var(--color-white);
  --bg-subtle: var(--slate-050);
  --bg-muted: var(--slate-100);
  --bg-inverse: var(--navy-900);
  --bg-inverse-2: var(--navy-800);
  --bg-accent-soft: var(--gold-050);

  /* Borders / lines */
  --border-1: var(--slate-200);
  --border-2: var(--slate-300);
  --border-strong: var(--slate-700);
  --border-accent: var(--gold-600);
  --border-on-navy: rgba(255, 255, 255, 0.08);

  /* Brand action color */
  --brand:           var(--color-navy);
  --brand-hover:     var(--navy-800);
  --brand-press:     var(--navy-700);
  --accent:          var(--color-gold);
  --accent-hover:    var(--gold-700);
  --accent-press:    var(--gold-800);

  /* Status — minimal palette derived to coexist with gold/navy */
  --status-success: #2E7D5B;
  --status-success-bg: #E7F2EC;
  --status-warning: #C9972B;        /* gold doubles as warning */
  --status-warning-bg: var(--gold-050);
  --status-danger:  #B83A3A;
  --status-danger-bg: #FBEDED;
  --status-info:    var(--navy-700);
  --status-info-bg: var(--navy-050);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* Weights actually used on the brand board */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;   /* "TechAMCs" wordmark weight */
  --fw-bold: 700;
  --fw-black: 800;

  /* Type ramp (rem-based; 16px root) */
  --fs-display-xl: 4.5rem;    /* 72 — hero lockups */
  --fs-display-lg: 3.5rem;    /* 56 */
  --fs-display-md: 2.75rem;   /* 44 */
  --fs-h1:         2.25rem;   /* 36 */
  --fs-h2:         1.75rem;   /* 28 */
  --fs-h3:         1.375rem;  /* 22 */
  --fs-h4:         1.125rem;  /* 18 */
  --fs-body-lg:    1.125rem;  /* 18 */
  --fs-body:       1rem;      /* 16 */
  --fs-body-sm:    0.875rem;  /* 14 */
  --fs-caption:    0.75rem;   /* 12 */
  --fs-eyebrow:    0.6875rem; /* 11 — uppercase, tracked */

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.14em;   /* uppercase eyebrows — used on tagline */

  /* ---------------------------------------------------------------------
     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;
  --space-32: 128px;

  /* ---------------------------------------------------------------------
     RADII — modest, "structured" feel. No pill-shaped chips on cards.
     --------------------------------------------------------------------- */
  --radius-0: 0px;
  --radius-1: 2px;     /* tags, tickets */
  --radius-2: 4px;     /* inputs, small buttons */
  --radius-3: 6px;     /* primary buttons */
  --radius-4: 8px;     /* cards */
  --radius-5: 12px;    /* feature cards */
  --radius-6: 16px;    /* media containers */
  --radius-pill: 999px;

  /* ---------------------------------------------------------------------
     SHADOWS — restrained. Navy-tinted, not black.
     --------------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(13, 27, 42, 0.06);
  --shadow-2: 0 2px 6px rgba(13, 27, 42, 0.08), 0 1px 2px rgba(13, 27, 42, 0.04);
  --shadow-3: 0 8px 24px rgba(13, 27, 42, 0.10), 0 2px 6px rgba(13, 27, 42, 0.06);
  --shadow-4: 0 20px 48px rgba(13, 27, 42, 0.14), 0 4px 12px rgba(13, 27, 42, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-focus: 0 0 0 3px rgba(201, 151, 43, 0.35);   /* gold ring */

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
  --gutter: 24px;
}

/* ===========================================================================
   SEMANTIC TYPE — apply to bare elements when used in a TechAMCs context
   =========================================================================== */
.ta-prose,
.ta-root {
  font-family: var(--font-sans);
  color: var(--fg-1);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ta-display-xl,
.ta-display-lg,
.ta-display-md,
.ta-h1, .ta-h2, .ta-h3, .ta-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
}

.ta-display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-semibold); }
.ta-display-lg { font-size: var(--fs-display-lg); font-weight: var(--fw-semibold); }
.ta-display-md { font-size: var(--fs-display-md); font-weight: var(--fw-semibold); }
.ta-h1 { font-size: var(--fs-h1); font-weight: var(--fw-semibold); }
.ta-h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.ta-h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.ta-h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

.ta-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-loose); color: var(--fg-2); }
.ta-body    { font-size: var(--fs-body);    line-height: var(--lh-base);  color: var(--fg-2); }
.ta-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base);  color: var(--fg-2); }
.ta-caption { font-size: var(--fs-caption); line-height: var(--lh-base);  color: var(--fg-3); }

.ta-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-accent);
}

.ta-mono { font-family: var(--font-mono); font-size: var(--fs-body-sm); }

a.ta-link, .ta-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a.ta-link:hover { color: var(--accent-press); }

/* Tagline treatment — uppercase, tracked, with dot separators */
.ta-tagline {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--fs-caption);
  color: currentColor;
}