/* ============================================================
   infidea — Design Tokens: Color & Type
   "infinity ideas" — software house · 25+ years
   Grounded in the brand logo (vivid crimson, white mark).
   ============================================================ */

/* ---- Webfonts (Google Fonts CDN) -------------------------- */
/* Display: Space Grotesk · Body: IBM Plex Sans · Mono: JetBrains Mono
   NOTE: the wordmark in the logo uses a custom rounded geometric face;
   it is preserved as an image asset, not reproduced in CSS. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ===== BRAND ============================================== */
  --brand-red:        #EC1A42;  /* primary — sampled from logo  */
  --brand-red-hover:  #D2123A;  /* darker press/hover           */
  --brand-red-press:  #B40E31;
  --brand-pink:       #F5325C;  /* lighter gradient top of logo */
  --brand-glow:       #FF5C7C;  /* highlight / accent on dark   */

  /* Brand red scale (50 → 900) */
  --red-50:  #FFF1F4;
  --red-100: #FFE0E7;
  --red-200: #FFC2CF;
  --red-300: #FF94AC;
  --red-400: #F95579;
  --red-500: #EC1A42;  /* = brand */
  --red-600: #D2123A;
  --red-700: #B00E31;
  --red-800: #8A0C28;
  --red-900: #5E0A1C;

  /* ===== INK / NEUTRALS (cool slate) ====================== */
  --ink-900: #0F1115;  /* near-black, primary dark surface     */
  --ink-800: #161A21;
  --ink-700: #20262F;
  --ink-600: #333B47;
  --ink-500: #515B69;
  --ink-400: #717C8B;
  --ink-300: #9AA3AF;
  --ink-200: #C7CDD5;
  --ink-100: #E4E8ED;
  --ink-50:  #F2F4F7;

  --white:    #FFFFFF;
  --surface:  #FAFBFC;  /* off-white page background            */
  --surface-2:#F2F4F7;  /* subtle raised / inset                */

  /* ===== SEMANTIC FOREGROUND ============================== */
  --fg-1: var(--ink-900);   /* primary text                     */
  --fg-2: var(--ink-600);   /* secondary text                   */
  --fg-3: var(--ink-400);   /* tertiary / captions              */
  --fg-on-dark:   #F2F4F7;  /* text on ink surfaces             */
  --fg-on-dark-2: #9AA3AF;
  --fg-on-brand:  #FFFFFF;  /* text on brand red                */

  /* ===== SEMANTIC STATE =================================== */
  --success: #18A957;
  --success-bg: #E7F7EE;
  --warning: #E8A317;
  --warning-bg: #FCF3DE;
  --danger:  #DD2233;
  --danger-bg: #FDECEE;
  --info:    #2563EB;   /* cool blue — AWS/cloud accent         */
  --info-bg: #E7EEFE;

  /* ===== BORDERS / LINES ================================== */
  --line-1: #E4E8ED;    /* hairline on light                    */
  --line-2: #D2D8E0;    /* stronger divider                     */
  --line-on-dark: rgba(255,255,255,.10);
  --focus-ring: rgba(236,26,66,.40);

  /* ===== ELEVATION / SHADOW ============================== */
  --shadow-xs: 0 1px 2px rgba(15,17,21,.06);
  --shadow-sm: 0 1px 3px rgba(15,17,21,.08), 0 1px 2px rgba(15,17,21,.04);
  --shadow-md: 0 4px 12px rgba(15,17,21,.08), 0 2px 4px rgba(15,17,21,.04);
  --shadow-lg: 0 12px 32px rgba(15,17,21,.12), 0 4px 8px rgba(15,17,21,.05);
  --shadow-brand: 0 8px 24px rgba(236,26,66,.28);

  /* ===== RADII =========================================== */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ===== SPACING (4px base) ============================== */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ===== TYPE FAMILIES =================================== */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ===== TYPE SCALE (semantic) =========================== */
  /* Display / hero */
  --t-display-size: 64px;  --t-display-lh: 1.04; --t-display-ls: -0.025em; --t-display-wt: 700;
  --t-h1-size: 44px;       --t-h1-lh: 1.08;      --t-h1-ls: -0.02em;       --t-h1-wt: 700;
  --t-h2-size: 32px;       --t-h2-lh: 1.14;      --t-h2-ls: -0.015em;      --t-h2-wt: 600;
  --t-h3-size: 24px;       --t-h3-lh: 1.22;      --t-h3-ls: -0.01em;       --t-h3-wt: 600;
  --t-h4-size: 19px;       --t-h4-lh: 1.3;       --t-h4-ls: -0.005em;      --t-h4-wt: 600;
  /* Body */
  --t-lead-size: 20px;     --t-lead-lh: 1.55;
  --t-body-size: 16px;     --t-body-lh: 1.6;
  --t-small-size: 14px;    --t-small-lh: 1.5;
  --t-caption-size: 12px;  --t-caption-lh: 1.45;
  /* Utility */
  --t-eyebrow-size: 13px;  --t-eyebrow-ls: 0.14em;  --t-eyebrow-wt: 600;
  --t-mono-size: 14px;     --t-mono-lh: 1.55;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display { font-family: var(--font-display); font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); font-weight: var(--t-display-wt); color: var(--fg-1); }
.t-h1 { font-family: var(--font-display); font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); font-weight: var(--t-h1-wt); color: var(--fg-1); }
.t-h2 { font-family: var(--font-display); font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); font-weight: var(--t-h2-wt); color: var(--fg-1); }
.t-h3 { font-family: var(--font-display); font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-ls); font-weight: var(--t-h3-wt); color: var(--fg-1); }
.t-h4 { font-family: var(--font-display); font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-ls); font-weight: var(--t-h4-wt); color: var(--fg-1); }

.t-lead { font-family: var(--font-body); font-size: var(--t-lead-size); line-height: var(--t-lead-lh); color: var(--fg-2); font-weight: 400; }
.t-body { font-family: var(--font-body); font-size: var(--t-body-size); line-height: var(--t-body-lh); color: var(--fg-2); font-weight: 400; }
.t-small { font-family: var(--font-body); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--fg-2); }
.t-caption { font-family: var(--font-body); font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--fg-3); }

.t-eyebrow { font-family: var(--font-mono); font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-ls); font-weight: var(--t-eyebrow-wt); text-transform: uppercase; color: var(--brand-red); }
.t-mono { font-family: var(--font-mono); font-size: var(--t-mono-size); line-height: var(--t-mono-lh); color: var(--fg-2); }
code, .code { font-family: var(--font-mono); font-size: 0.9em; }