/* VIAZ Consultoria — combined stylesheet for deploy */


/* ===== tokens/fonts.css ===== */
/* VIAZ — Webfonts
   Brand wordmark echoes a classical Roman capital serif (Cinzel ≈ the logo lettering).
   IBM Plex family supplies an engineered, neutral working system:
   Sans (UI/body), Serif (editorial/lead), Mono (data/eyebrows/specs).
   Loaded from Google Fonts. If you self-host, replace this @import with @font-face rules. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400&display=swap');


/* ===== tokens/colors.css ===== */
/* VIAZ — Color tokens
   Brand DNA: deep petrol-green (the wall the wordmark sits on) + metallic gold.
   Neutrals are warm "concrete" greys. An olive-leaning green plays a supporting
   sustainability/infra role. Keep gold for accent + emphasis, never large fills. */

:root {
  /* ---- Petrol green (primary brand) ---- */
  --petrol-900: #042e34;
  --petrol-800: #073b43;
  --petrol-700: #0c4a52; /* core brand green */
  --petrol-600: #0e565f;
  --petrol-500: #14656e;
  --petrol-400: #2e7c84;
  --petrol-300: #6aa6ac;
  --petrol-100: #d3e3e2;
  --petrol-50:  #eaf1f0;

  /* ---- Metallic gold (accent) ---- */
  --gold-800: #7e6228;
  --gold-700: #9c7a31;
  --gold-600: #b68c3b;
  --gold-500: #c49a48; /* core gold */
  --gold-400: #d4ae5e;
  --gold-300: #e6c77e;
  --gold-200: #f2d98f;
  --gold-100: #f7ead0;
  --gold-50:  #faf3e3;

  /* ---- Olive (secondary / eco + infrastructure) ---- */
  --olive-700: #4d5430;
  --olive-600: #5e6638;
  --olive-500: #767e45;
  --olive-400: #8e9657;
  --olive-100: #e4e6d6;

  /* ---- Warm concrete neutrals ---- */
  --ink-900: #15201f; /* near-black, warm green-grey */
  --ink-800: #243230;
  --ink-700: #33403e;
  --ink-600: #475250;
  --ink-500: #5c6663;
  --ink-400: #828b87;
  --concrete-300: #b3b8b1;
  --concrete-200: #d9dbd4;
  --concrete-150: #e6e7e1;
  --concrete-100: #eceee8;
  --paper: #f7f6f1;  /* warm off-white page */
  --white: #ffffff;

  /* ---- Status (brand-aligned, muted) ---- */
  --green:  #3e7c52;
  --green-bg: #e6efe7;
  --amber:  #c0892e;
  --amber-bg: #f6ecd5;
  --clay:   #b0492f;  /* danger */
  --clay-bg: #f4e2db;
  --info:   #14656e;
  --info-bg: #e1edec;

  /* ---- Metallic gold gradient (use sparingly: rules, hairlines, emphasis) ---- */
  --grad-gold: linear-gradient(135deg, #ecd083 0%, #c49a48 48%, #9c7a31 100%); /* @kind color */
  --grad-petrol: linear-gradient(160deg, #0e565f 0%, #0c4a52 55%, #042e34 100%); /* @kind color */

  /* =================================================================
     SEMANTIC ALIASES — prefer these in product/components
     ================================================================= */
  --color-bg:          var(--paper);
  --surface-page:      var(--paper);
  --surface-card:      var(--white);
  --surface-raised:    var(--white);
  --surface-sunken:    var(--concrete-100);
  --surface-inverse:   var(--petrol-700);
  --surface-inverse-2: var(--petrol-900);
  --surface-tint:      var(--petrol-50);

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-dark:        var(--paper);
  --text-on-dark-muted:  rgba(247, 246, 241, 0.66);
  --text-on-dark-faint:  rgba(247, 246, 241, 0.42);

  --brand:          var(--petrol-700);
  --brand-strong:   var(--petrol-900);
  --accent:         var(--gold-500);
  --accent-strong:  var(--gold-600);
  --accent-soft:    var(--gold-100);
  --on-accent:      var(--ink-900);

  --border:         var(--concrete-200);
  --border-soft:    var(--concrete-150);
  --border-strong:  var(--concrete-300);
  --border-inverse: rgba(247, 246, 241, 0.16);
  --ring:           rgba(196, 154, 72, 0.45); /* gold focus ring */
  --ring-brand:     rgba(12, 74, 82, 0.35);

  --link:           var(--petrol-600);
  --link-hover:     var(--petrol-800);
}


/* ===== tokens/typography.css ===== */
/* VIAZ — Typography tokens */

:root {
  /* ---- Families ---- */
  --font-brand: 'Cinzel', 'Times New Roman', serif;        /* wordmark / rare display capitals */
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; /* editorial / lead / quotes */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* UI + body */
  --font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* data, eyebrows, specs */

  /* ---- Type scale (1.25 major-third-ish, tuned) ---- */
  --text-2xs:  0.6875rem; /* 11 — micro labels */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 — UI default */
  --text-body: 1.0625rem; /* 17 — reading body */
  --text-md:   1.1875rem; /* 19 — lead */
  --text-lg:   1.5rem;    /* 24 */
  --text-xl:   1.9375rem; /* 31 */
  --text-2xl:  2.5rem;    /* 40 */
  --text-3xl:  3.25rem;   /* 52 */
  --text-4xl:  4.25rem;   /* 68 */
  --text-5xl:  5.5rem;    /* 88 — hero */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  /* ---- Line heights ---- */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.16; /* @kind font */
  --lh-heading: 1.22; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.66; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-tightest: -0.03em; /* @kind font */
  --ls-tight:    -0.015em; /* @kind font */
  --ls-normal:   0em; /* @kind font */
  --ls-wide:     0.04em; /* @kind font */
  --ls-eyebrow:  0.18em; /* @kind font */
  --ls-caps:     0.08em; /* @kind font */

  /* ---- Semantic roles ---- */
  --eyebrow-font: var(--font-mono);
  --eyebrow-size: var(--text-xs);
  --eyebrow-spacing: var(--ls-eyebrow);

  --display-font: var(--font-serif);
  --heading-font: var(--font-sans);
  --body-font: var(--font-sans);
}


/* ===== tokens/spacing.css ===== */
/* VIAZ — Spacing & layout tokens (4px base) */

:root {
  --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.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-40: 10rem;    /* 160 */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-wide: 1380px;
  --container-prose: 68ch;
  --gutter: clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --section-y: clamp(4rem, 9vw, 8rem); /* @kind spacing */
}


/* ===== tokens/effects.css ===== */
/* VIAZ — Effects: radii, borders, shadows, motion
   The brand reads architectural/engineered: modest radii, hairline borders,
   restrained cool shadows. Gold appears as thin metallic rules, not big fills. */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:  3px;
  --radius-sm:  5px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---- Border ---- */
  --border-hairline: 1px solid var(--border); /* @kind other */
  --border-card: 1px solid var(--border-soft); /* @kind other */

  /* ---- Elevation (cool, low-spread) ---- */
  --shadow-xs: 0 1px 2px rgba(21, 32, 31, 0.06);
  --shadow-sm: 0 1px 3px rgba(21, 32, 31, 0.07), 0 1px 2px rgba(21, 32, 31, 0.05);
  --shadow-md: 0 4px 12px rgba(21, 32, 31, 0.08), 0 1px 3px rgba(21, 32, 31, 0.06);
  --shadow-lg: 0 14px 34px rgba(13, 45, 50, 0.12), 0 4px 10px rgba(21, 32, 31, 0.06);
  --shadow-xl: 0 28px 60px rgba(8, 40, 45, 0.18), 0 8px 18px rgba(21, 32, 31, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* gold-tinted glow for emphasis/hover on dark */
  --glow-gold: 0 0 0 1px rgba(196, 154, 72, 0.5), 0 8px 24px rgba(196, 154, 72, 0.18);

  /* ---- Hairline rules ---- */
  --rule: 1px solid var(--border); /* @kind other */
  --rule-gold: 1px solid var(--gold-500); /* @kind other */

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.2, 0.65, 0.25, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur:        200ms; /* @kind other */
  --dur-slow:   340ms; /* @kind other */

  --focus-ring: 0 0 0 3px var(--ring); /* @kind shadow */
}


/* ===== tokens/base.css ===== */
/* VIAZ — base element defaults (kept out of styles.css so that stays import-only) */

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

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 0.5em;
}

p { margin: 0 0 1em; }

a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease-out); }
a:hover { color: var(--link-hover); }

::selection { background: var(--gold-200); color: var(--ink-900); }

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

/* Reusable brand atoms */
.viaz-eyebrow {
  font-family: var(--eyebrow-font);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: var(--fw-medium);
}

.viaz-rule-gold {
  height: 2px; border: 0; width: 56px;
  background: var(--grad-gold);
}