/* ============================================================
   SiDo IT Consulting — Colors & Type Foundation
   Two brand colors: Burgundy #6D1F37  +  Coral/Raspberry #E63C58
   Signature: the burgundy→coral gradient ("Lead the Race")
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Synthesised italic is used for hero accents to echo the slanted wordmark */
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== BRAND CORE ===== */
  --brand-burgundy:    #6D1F37; /* dominant mark colour          */
  --brand-coral:       #E63C58; /* accent + wordmark + actions    */
  --brand-coral-light: #EC6D82; /* highlight / hover lift         */
  --brand-coral-soft:  #F4A6B3; /* tints, borders on light        */
  --brand-burgundy-deep:#4A1525;/* pressed / deep shade           */

  /* ===== SIGNATURE GRADIENTS ===== */
  --grad-brand:   linear-gradient(135deg, #6D1F37 0%, #E63C58 100%); /* @kind color */
  --grad-brand-r: linear-gradient(135deg, #E63C58 0%, #6D1F37 100%); /* @kind color */
  --grad-coral:   linear-gradient(135deg, #E63C58 0%, #EC6D82 100%); /* @kind color */
  --grad-ink:     linear-gradient(160deg, #1B0E15 0%, #2A1019 55%, #4A1525 100%); /* @kind color */
  --grad-sheen:   linear-gradient(135deg, rgba(230,60,88,.16) 0%, rgba(109,31,55,.04) 100%); /* @kind color */

  /* ===== DARK SURFACES (primary brand environment) ===== */
  --ink-900: #120A0F; /* deepest background        */
  --ink-800: #190D13; /* page background           */
  --ink-700: #20121A; /* card / surface            */
  --ink-600: #2A1822; /* raised surface            */
  --ink-500: #38222E; /* hairline / divider base   */

  /* ===== NEUTRAL TEXT (on dark) ===== */
  --fg-1: #F8F4F5; /* primary text     */
  --fg-2: #CDBFC5; /* secondary text   */
  --fg-3: #9A8A91; /* muted / captions */
  --fg-on-brand: #FFFFFF;

  /* ===== LIGHT SURFACES (documents / light UI) ===== */
  --paper-0: #FFFFFF;
  --paper-1: #FBF7F8; /* warm off-white page */
  --paper-2: #F4ECEE; /* subtle tinted panel */
  --paper-line: #ECDFE3;
  --ink-1: #1A1014; /* primary text on light   */
  --ink-2: #5C4A51; /* secondary text on light */
  --ink-3: #8E7E85; /* muted on light          */

  /* ===== SEMANTIC (warmed to harmonise with the brand) =====
     Danger intentionally uses the brand coral — it is the most "alert" hue
     the palette owns. Info is a plum-violet that sits beside the burgundy. */
  --success: #1F9C6B;
  --success-bg: #112720;
  --warning: #E2A53C;
  --warning-bg: #2C2110;
  --danger:  #E63C58;
  --danger-bg: #2E1019;
  --info:    #8E6CC0;
  --info-bg: #1C1430;

  /* ===== BORDERS / HAIRLINES ===== */
  --line-dark: rgba(255,255,255,.09);
  --line-dark-strong: rgba(255,255,255,.16);
  --line-light: #ECDFE3;

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

  /* ===== SHADOWS / ELEVATION ===== */
  --sh-sm: 0 1px 2px rgba(10,4,7,.4);
  --sh-md: 0 8px 24px -8px rgba(10,4,7,.55);
  --sh-lg: 0 24px 60px -16px rgba(10,4,7,.7);
  --glow-coral: 0 8px 30px -6px rgba(230,60,88,.45);
  --glow-coral-soft: 0 0 0 4px rgba(230,60,88,.18);

  /* ===== SPACING SCALE (4px base) ===== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ===== TYPE FAMILIES ===== */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* ===== TYPE SCALE (clamped, fluid) ===== */
  --t-display: 700 clamp(48px, 7vw, 88px)/0.98 var(--font-display);
  --t-h1: 700 clamp(36px, 4.4vw, 60px)/1.02 var(--font-display);
  --t-h2: 700 clamp(28px, 3vw, 42px)/1.06 var(--font-display);
  --t-h3: 700 clamp(22px, 2.1vw, 30px)/1.12 var(--font-display);
  --t-h4: 700 18px/1.2 var(--font-display);
  --t-eyebrow: 700 13px/1.2 var(--font-display);
  --t-lead: 300 clamp(18px, 1.5vw, 22px)/1.55 var(--font-body);
  --t-body: 300 16px/1.65 var(--font-body);
  --t-small: 300 14px/1.6 var(--font-body);
  --t-caption: 300 12px/1.5 var(--font-body);

  --track-tight: -0.02em;
  --track-eyebrow: 0.18em;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS (opt-in via .sido-type scope)
   ============================================================ */
.sido-type { font: var(--t-body); color: var(--fg-1); -webkit-font-smoothing: antialiased; }
.sido-type h1 { font: var(--t-h1); letter-spacing: var(--track-tight); margin: 0 0 .4em; }
.sido-type h2 { font: var(--t-h2); letter-spacing: var(--track-tight); margin: 0 0 .4em; }
.sido-type h3 { font: var(--t-h3); letter-spacing: var(--track-tight); margin: 0 0 .4em; }
.sido-type h4 { font: var(--t-h4); margin: 0 0 .5em; }
.sido-type p { margin: 0 0 1em; max-width: 64ch; text-wrap: pretty; }
.sido-type .lead { font: var(--t-lead); color: var(--fg-2); }
.sido-type .eyebrow {
  font: var(--t-eyebrow); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--brand-coral);
}
.sido-type small { font: var(--t-small); color: var(--fg-3); }
.sido-type code { font: 400 .9em var(--font-mono); color: var(--brand-coral-light); }

/* Gradient text helper — the signature treatment for key words */
.sido-gradient-text {
  background: var(--grad-coral);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Italic display accent — echoes the slanted SiDo wordmark */
.sido-italic { font-style: italic; }