/* =============================================================
   NIAS DESIGN TOKENS
   Single source of truth for colors, type, spacing, radii, etc.
   Inspired by Resend's dark, monospace-accented direction.
   ============================================================= */

/* -------------------------------------------------------------
   FONTS — substitutes loaded from Google Fonts.
   Real brand fonts (commercial): Domaine Display, ABC Favorit,
   Inter, Commit Mono. Substituted with the closest free
   equivalents that preserve hierarchy and rhythm.
   ------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600&family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- COLOR — base ---------- */
  --color-black:        #000000;       /* the canvas, non-negotiable */
  --color-black-12:     rgba(0,0,0,0.95);
  --color-white:        #ffffff;
  --color-near-white:   #f0f0f0;       /* primary text */

  /* ---------- COLOR — neutral scale ---------- */
  --color-silver:       #a1a4a5;       /* secondary text */
  --color-gray-mid:     #5c5c5c;       /* hover/emphasis */
  --color-gray-dark:    #464a4d;       /* tertiary text */
  --color-gray-quat:    #494949;       /* quaternary */
  --color-gray-deep:    #2a2a2a;       /* deepest visible gray */

  /* ---------- COLOR — accents (each scale is opacity-graded) ---------- */
  /* Orange — Velocidade pillar, marketing energy */
  --color-orange-bg:    rgba(255, 89, 0, 0.22);    /* low-opacity bg */
  --color-orange:       #ff801f;                    /* primary accent */
  --color-orange-soft:  #ffa057;                    /* hover/secondary */

  /* Green — Acurácia pillar, success, "approved" */
  --color-green-bg:     rgba(17, 255, 153, 0.18);
  --color-green:        #11ff99;
  --color-green-soft:   #22ff99;

  /* Blue — BRAND PRIMARY (sampled from Nias cube logo).
     Used for Capacidade pillar, interactive, info, links. */
  --color-blue-deep:    #001767;                    /* shadow face */
  --color-blue:         #0d4cff;                    /* core / dominant face */
  --color-blue-soft:    #3a7bff;                    /* lit face / hover */
  --color-blue-glow:    #0095fe;                    /* edge highlight */
  --color-blue-bg:      rgba(13, 76, 255, 0.22);    /* low-opacity bg */
  --color-blue-bg-soft: rgba(13, 76, 255, 0.12);

  /* Yellow — warnings, attention */
  --color-yellow-bg:    rgba(255, 197, 61, 0.18);
  --color-yellow:       #ffc53d;

  /* Red — destructive, risk, errors */
  --color-red-bg:       rgba(255, 32, 71, 0.22);
  --color-red:          #ff4060;

  /* ---------- COLOR — borders & surfaces (the "frost" system) ---------- */
  --frost-border:       rgba(214, 235, 253, 0.19);   /* THE signature line */
  --frost-border-soft:  rgba(217, 237, 254, 0.10);   /* list items, dividers */
  --frost-border-hover: rgba(214, 235, 253, 0.32);   /* hovered card border */
  --frost-ring:         rgba(176, 199, 217, 0.145);  /* shadow-as-border ring */

  --surface-1:          rgba(255, 255, 255, 0.02);   /* very faint card wash */
  --surface-2:          rgba(255, 255, 255, 0.04);   /* nested panel */
  --surface-3:          rgba(255, 255, 255, 0.06);   /* hover */
  --surface-glass:      rgba(0, 0, 0, 0.60);         /* + backdrop-filter blur */

  /* ---------- COLOR — semantic ---------- */
  --fg-1:               var(--color-near-white);     /* primary text */
  --fg-2:               var(--color-silver);          /* secondary text */
  --fg-3:               var(--color-gray-mid);        /* tertiary text */
  --fg-4:               var(--color-gray-dark);       /* quaternary */
  --bg:                 var(--color-black);
  --bg-elevated:        var(--surface-1);
  --border:             var(--frost-border);
  --link:               var(--color-blue);
  --success:            var(--color-green);
  --warning:            var(--color-yellow);
  --danger:             var(--color-red);

  /* ---------- TYPE — families ---------- */
  --font-serif-display: "Fraunces", "Domaine Display", ui-serif, Georgia, serif;
  --font-sans-display:  "Geist", "ABC Favorit", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans:          "Inter", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:          "Geist Mono", "Commit Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---------- TYPE — scale (px, with rem in comments) ---------- */
  --fs-hero:            96px;   /* 6.00rem  display hero (desktop) */
  --fs-hero-mobile:     76.8px; /* 4.80rem  display hero (mobile)  */
  --fs-section:         56px;   /* 3.50rem  section heading        */
  --fs-feature:         24px;   /* 1.50rem  feature title           */
  --fs-subheading:      20px;   /* 1.25rem  sub-heading             */
  --fs-body-lg:         18px;   /* 1.125rem body large              */
  --fs-body:            16px;   /* 1.00rem  body                    */
  --fs-small:           14px;   /* 0.875rem small / nav / button    */
  --fs-tiny:            12px;   /* 0.75rem  tags, meta, eyebrow     */

  /* ---------- TYPE — line-height ---------- */
  --lh-tight-display:   1.00;
  --lh-tight:           1.20;
  --lh-snug:            1.30;
  --lh-normal:          1.43;
  --lh-relaxed:         1.50;
  --lh-loose:           1.60;

  /* ---------- TYPE — letter-spacing ---------- */
  --ls-hero:            -0.96px;  /* aggressive negative */
  --ls-section:         -2.8px;   /* aggressive negative */
  --ls-subheading:      -0.4px;
  --ls-normal:          0;
  --ls-nav:             0.35px;   /* the ONLY positive tracking */
  --ls-eyebrow:         0.6px;    /* uppercase tags */

  /* ---------- SPACING ---------- */
  --sp-1:    1px;
  --sp-2:    2px;
  --sp-4:    4px;
  --sp-8:    8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-56:  56px;
  --sp-80:  80px;
  --sp-120: 120px;

  /* ---------- RADII ---------- */
  --r-sharp:      4px;     /* inputs, ghost buttons */
  --r-subtle:     6px;     /* menus */
  --r-standard:   8px;     /* tabs */
  --r-comfortable:10px;
  --r-card-sm:   12px;     /* clipboard buttons */
  --r-card:      16px;     /* cards, images */
  --r-section:   24px;     /* large panels */
  --r-pill:    9999px;     /* CTAs, badges */

  /* ---------- SHADOWS / RINGS ---------- */
  --ring:         0 0 0 1px var(--frost-ring);
  --ring-frost:   0 0 0 1px var(--frost-border);
  --shadow-soft:  0 1px 3px rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
  --focus-ring:   0 0 0 2px var(--color-near-white), 0 0 0 6px #000;

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     360ms;
}

/* =============================================================
   BASE — applied wherever this stylesheet is imported.
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--color-blue); color: var(--color-black); }

/* =============================================================
   SEMANTIC TYPE — usable as classes OR via element selectors.
   ============================================================= */

/* h1 — display hero (use sparingly, one per page) */
h1, .t-hero {
  font-family: var(--font-serif-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-tight-display);
  letter-spacing: var(--ls-hero);
  color: var(--fg-1);
  margin: 0;
  font-feature-settings: "ss01";
  font-variation-settings: "opsz" 144, "SOFT" 30;
  text-wrap: balance;
}
@media (max-width: 600px) {
  h1, .t-hero { font-size: var(--fs-hero-mobile); letter-spacing: -0.768px; }
}

/* h2 — section heading */
h2, .t-section {
  font-family: var(--font-sans-display);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-section);
  color: var(--fg-1);
  margin: 0;
  font-feature-settings: "ss01", "ss04", "ss11";
  text-wrap: balance;
}
@media (max-width: 600px) { h2, .t-section { font-size: 40px; letter-spacing: -1.6px; } }

/* h3 — sub-heading */
h3, .t-subheading {
  font-family: var(--font-sans-display);
  font-size: var(--fs-subheading);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-subheading);
  color: var(--fg-1);
  margin: 0;
  font-feature-settings: "ss01", "ss04", "ss11";
}

/* h4 — feature title (Inter, larger) */
h4, .t-feature {
  font-family: var(--font-sans);
  font-size: var(--fs-feature);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  letter-spacing: -0.2px;
  color: var(--fg-1);
  margin: 0;
}

/* p — body */
p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
}
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.t-body-strong { color: var(--fg-1); font-weight: 600; }

/* nav link — ABC Favorit (Geist) with positive tracking */
.t-nav {
  font-family: var(--font-sans-display);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-nav);
  color: var(--fg-1);
  font-feature-settings: "ss01", "ss03", "ss04";
}

/* button text */
.t-button {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: var(--lh-normal);
  letter-spacing: 0;
}

/* small / caption */
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

/* tiny / eyebrow */
.t-tiny {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 500;
  line-height: 1.33;
  color: var(--fg-2);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 500;
  line-height: 1.33;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* code */
code, .t-code {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}
.t-code-sm { font-family: var(--font-mono); font-size: var(--fs-small); }
.t-code-tiny { font-family: var(--font-mono); font-size: var(--fs-tiny); }

/* numeric tabular (for tables of money, %, dates) */
.t-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* =============================================================
   COMPONENT PRIMITIVES — small set, used everywhere
   ============================================================= */

/* Pill button — transparent (default CTA on dark) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  line-height: 1.43;
  color: var(--fg-1);
  background: transparent;
  border: 1px solid var(--frost-border);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
  text-decoration: none;
}
.btn:hover { background: rgba(255,255,255,0.08); border-color: var(--frost-border-hover); }
.btn:active { opacity: 0.85; }

/* Pill button — solid white (high-contrast CTA) */
.btn-primary {
  background: var(--color-white);
  color: var(--color-black);
  border-color: transparent;
}
.btn-primary:hover { background: #e8e8e8; border-color: transparent; }

/* Ghost button (no border) */
.btn-ghost {
  background: transparent;
  color: var(--fg-1);
  border: none;
  border-radius: var(--r-sharp);
  padding: 6px 10px;
}
.btn-ghost:hover { background: var(--surface-2); }

/* Card — the workhorse container */
.card {
  background: var(--surface-1);
  border: 1px solid var(--frost-border);
  border-radius: var(--r-card);
  padding: var(--sp-24);
}

/* Input */
.input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--fg-1);
  background: var(--surface-1);
  border: 1px solid var(--frost-border);
  border-radius: var(--r-sharp);
  outline: none;
  transition: border-color var(--dur-base) var(--ease-out);
}
.input::placeholder { color: var(--fg-3); }
.input:focus { border-color: var(--color-blue); }

/* Tag / Badge — accent variants */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-tiny);
  font-weight: 500;
  line-height: 1.33;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}
.tag-orange { background: var(--color-orange-bg); color: var(--color-orange-soft); }
.tag-green  { background: var(--color-green-bg);  color: var(--color-green); }
.tag-blue   { background: var(--color-blue-bg);   color: var(--color-blue); }
.tag-yellow { background: var(--color-yellow-bg); color: var(--color-yellow); }
.tag-red    { background: var(--color-red-bg);    color: var(--color-red); }
.tag-neutral{ background: transparent; color: var(--fg-2); border-color: var(--frost-border); }

/* Divider */
.divider { height: 1px; background: var(--frost-border); border: 0; margin: 0; }

/* =============================================================
   UTILITY — minimal layout helpers
   ============================================================= */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.stack-8  { display: flex; flex-direction: column; gap: 8px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-16 { display: flex; flex-direction: column; gap: 16px; }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.row-8  { display: flex; align-items: center; gap: 8px; }
.row-12 { display: flex; align-items: center; gap: 12px; }
.row-16 { display: flex; align-items: center; gap: 16px; }
.row-24 { display: flex; align-items: center; gap: 24px; }