/* Stevva design tokens — flattened from tokens/*.css (no @import chain). */

/* ============================================================
   Stevva — Webfonts
   Brand typeface: Avenir (self-hosted, uploaded by Stevva)
   Weight map: Light 300 · Book 400 · Regular 500 · Heavy 700 · Black 800
   ============================================================ */

@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Heavy.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Avenir";
  src: url("fonts/Avenir_Black.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ============================================================
   Stevva — Color tokens
   A disciplined, professional palette: a single dark slate "ink"
   plus a neutral grey ramp, on warm-white paper. Six divisional
   accents brand the sub-companies; the corporate group itself is
   intentionally monochrome.
   ============================================================ */

:root {
  /* ---- Brand core ---------------------------------------- */
  --ink: #1c242b;            /* primary brand color — monogram, headings, body */
  --ink-strong: #11171c;     /* near-black, for max-contrast headings */
  --ink-soft: #38424c;       /* softened ink for secondary headings */

  /* ---- Neutral ramp (cool slate grey) -------------------- */
  --grey-900: #1c242b;
  --grey-800: #38424c;
  --grey-700: #54606b;
  --grey-600: #6f7b86;
  --grey-500: #8c97a1;
  --grey-400: #aeb6bd;
  --grey-300: #cfd5da;
  --grey-200: #e4e8eb;
  --grey-100: #f0f2f4;
  --grey-50:  #f7f8f9;
  --white:    #ffffff;
  --paper:    #fbfbfa;       /* warm off-white page background */

  /* ---- Divisional accents (sub-brands) ------------------- */
  --accent-incorporations: #0a1b4b;  /* deep navy */
  --accent-tax:            #2c706e;  /* teal */
  --accent-legal:          #b89351;  /* gold */
  --accent-immigration:    #554a82;  /* violet */
  --accent-payroll:        #33567c;  /* steel blue */
  --accent-realestate:     #b06854;  /* terracotta */
  --accent-audit:          #c2691e;  /* burnt orange — Audit & Assurance */
  --accent-legal-ink:      #8a6d3a;  /* gold darkened for text (4.85:1 on white) */
  --accent-realestate-ink: #a05741;  /* terracotta darkened for text (5.3:1 on white) */

  /* tints for soft fills (12% over paper) */
  --accent-incorporations-soft: #e6e8ef;
  --accent-tax-soft:            #e3eeee;
  --accent-legal-soft:          #f4eede;
  --accent-immigration-soft:    #eae8f0;
  --accent-payroll-soft:        #e4eaf0;
  --accent-realestate-soft:     #f3e7e2;
  --accent-audit-soft:          #f7ead9;

  /* ---- Functional / status ------------------------------- */
  --success: #2c706e;        /* reuse teal — "in good standing" */
  --success-soft: #e3eeee;
  --warning: #b89351;        /* gold — attention / due soon */
  --warning-soft: #f4eede;
  --danger:  #b0413a;        /* muted brick red — overdue / error */
  --danger-soft: #f5e5e3;
  --info:    #33567c;        /* steel — informational */
  --info-soft: #e4eaf0;

  /* ---- Semantic aliases ---------------------------------- */
  --bg-page:        var(--paper);
  --bg-subtle:      var(--grey-50);
  --bg-muted:       var(--grey-100);
  --surface-card:   var(--white);
  --surface-inset:  var(--grey-50);
  --surface-ink:    var(--ink);          /* dark sections */

  --text-strong:    var(--ink-strong);
  --text-body:      var(--ink);
  --text-secondary: var(--grey-700);
  --text-muted:     var(--grey-700);
  --text-on-ink:    #eef0f2;
  --text-on-ink-muted: #9aa6b0;

  --border-subtle:  var(--grey-200);
  --border-default: var(--grey-300);
  --border-strong:  var(--grey-400);
  --border-ink:     var(--ink);

  /* default brand accent (group level == ink; primary CTA uses ink) */
  --accent:         var(--ink);
  --accent-contrast:#ffffff;
}


/* ============================================================
   Stevva — Typography tokens
   One typeface (Avenir) does everything. Geometric, calm, precise.
   Headings are tight and confident; body is generous and readable.
   Eyebrows / labels are tracked-out uppercase (echoes the logo
   tagline "CORPORATE SERVICES GROUP").
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------ */
  --font-sans: "Avenir", "Avenir Next", "Nunito Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Weights (mapped to Avenir cuts) ------------------- */
  --fw-light: 300;     /* @kind font */ /* Avenir Light */
  --fw-book: 400;      /* @kind font */ /* Avenir Book — default body */
  --fw-regular: 500;   /* @kind font */ /* Avenir Regular — emphasis */
  --fw-heavy: 700;     /* @kind font */ /* Avenir Heavy — headings */
  --fw-black: 800;     /* @kind font */ /* Avenir Black — display */

  /* ---- Type scale (1.250 major-third-ish, tuned) --------- */
  --text-display: clamp(2.75rem, 7vw, 4.5rem);   /* 44 → 72px — hero */
  --text-h1: clamp(2.05rem, 6vw, 3rem);          /* 33 → 48px */
  --text-h2: clamp(1.65rem, 4.6vw, 2.25rem);     /* 26 → 36px */
  --text-h3: clamp(1.4rem, 3.2vw, 1.625rem);     /* 22 → 26px */
  --text-h4: 1.25rem;       /* 20px */
  --text-lg: 1.125rem;      /* 18px — lead paragraph */
  --text-base: 1rem;        /* 16px — body */
  --text-sm: 0.875rem;      /* 14px */
  --text-xs: 0.75rem;       /* 12px — captions, eyebrows */

  /* ---- Line heights -------------------------------------- */
  --lh-tight: 1.05;     /* @kind font */ /* display */
  --lh-snug: 1.2;       /* @kind font */ /* headings */
  --lh-normal: 1.5;     /* @kind font */ /* body */
  --lh-relaxed: 1.65;   /* @kind font */ /* long-form */

  /* ---- Letter spacing ------------------------------------ */
  --ls-tight: -0.02em;   /* @kind font */ /* large display */
  --ls-snug: -0.01em;    /* @kind font */ /* headings */
  --ls-normal: 0;        /* @kind font */
  --ls-wide: 0.04em;     /* @kind font */
  --ls-eyebrow: 0.18em;  /* @kind font */ /* tracked-out uppercase labels */
}


/* ============================================================
   Stevva — Spacing, radii, shadows, layout
   Restrained and architectural. 4px base grid. Corners are
   modest (the brand mark is sharp/geometric, so UI stays crisp —
   small radii, never pill-soft except on tags/avatars).
   Shadows are soft, low, cool — never heavy.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) -------------------------- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */

  /* ---- Radii --------------------------------------------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;     /* default — cards, inputs, buttons */
  --radius-lg: 12px;
  --radius-xl: 18px;    /* large feature cards */
  --radius-pill: 999px; /* tags, badges, avatars */

  /* ---- Borders ------------------------------------------- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows (cool, low, layered) ---------------------- */
  --shadow-xs: 0 1px 2px rgba(28, 36, 43, 0.06);
  --shadow-sm: 0 1px 3px rgba(28, 36, 43, 0.08), 0 1px 2px rgba(28, 36, 43, 0.04);
  --shadow-md: 0 4px 12px rgba(28, 36, 43, 0.08), 0 2px 4px rgba(28, 36, 43, 0.04);
  --shadow-lg: 0 12px 28px rgba(28, 36, 43, 0.10), 0 4px 10px rgba(28, 36, 43, 0.05);
  --shadow-xl: 0 24px 56px rgba(28, 36, 43, 0.14), 0 8px 18px rgba(28, 36, 43, 0.06);
  --shadow-focus: 0 0 0 3px rgba(51, 86, 124, 0.28); /* steel ring */

  /* ---- Layout -------------------------------------------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --gutter: 1.5rem;

  /* ---- Motion -------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);     /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);  /* @kind other */
  --dur-fast: 120ms;   /* @kind other */
  --dur-base: 200ms;   /* @kind other */
  --dur-slow: 320ms;   /* @kind other */
}

/* ---- Mobile: tighten the largest vertical rhythm so sections
   don't feel sparse on phones. Desktop (>760px) is untouched.
   Only the big section-padding tokens shrink; gaps/inner padding
   (space-8 and below) keep their values.                        */
@media (max-width: 760px) {
  :root {
    --space-9: 3.5rem;    /* 96 → 56 */
    --space-10: 4.5rem;   /* 128 → 72 */
  }
}
@media (max-width: 480px) {
  :root {
    --space-9: 3rem;      /* 96 → 48 */
    --space-10: 3.75rem;  /* 128 → 60 */
    --space-8: 3rem;      /* 64 → 48 */
  }
}


/* ============================================================
   Stevva — Base layer
   Light, opinionated defaults that consume the tokens.
   Kept minimal so consumers can build on top.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text-strong);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

/* Tracked-out uppercase eyebrow/label — a brand signature */
.stevva-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

::selection { background: rgba(51, 86, 124, 0.18); }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}