/* ============================================================================
   SUITE — VISUAL TOKENS
   Single source of truth for the public marketing site.

   AUTHORITY. Every value in the OFFICIAL block below is traceable to the
   official SUITE Brand & Media Kit v1.0 (Low-IP, LLC):
     kit/18 - Colors/suite-colors.md
     kit/19 - Typography/suite-typography.md
     kit/01 - Brand Guidelines/SUITE Brand Guidelines.dc.html
     kit/11 - Favicons/HEAD-SNIPPET.html

   ⚠ THE KIT DEFINES NO BUTTONS, RADII, SHADOWS, CARDS OR SPACING.
   Those live in the DERIVED block, are marked as such, and are pending owner
   approval. Do not describe them as brand-official.

   ⚠ "Do not invent colors outside this palette." — suite-colors.md
   Every colour below is either a palette entry, an official gradient stop, or
   an alpha of a palette entry over a palette ground (which introduces no new
   hue). Nothing else is permitted.
   ============================================================================ */

:root{

  /* === OFFICIAL — palette (kit 18) ======================================= */
  --suite-orange:#F5911E;   /* Signal Orange  — primary accent, the "S", one hexagon side */
  --suite-blue:#5FABD6;     /* Data Blue      — secondary accent, links, one hexagon side */
  --suite-green:#6BBF6B;    /* System Green   — tertiary accent, success, one hexagon side */
  --suite-navy:#17384F;     /* Deep Navy      — light-mode ink, icon backgrounds */
  --suite-infra:#06111B;    /* Infrastructure — dark-mode background */
  --suite-steel:#4D7F9E;    /* Steel          — hexagon connector sides, muted UI */
  --suite-cloud:#F2F7FA;    /* Cloud          — wordmark on dark backgrounds */
  --suite-white:#FFFFFF;
  --suite-black:#000000;

  /* === OFFICIAL — gradients (kit 18) ===================================== */
  /* Dark-mode background gradient, marketing surfaces. Stops #143C58 / #0B2536
     / #06111B exist ONLY inside this gradient; they are not standalone palette
     entries and must not be used as flat fills. */
  --suite-gradient:radial-gradient(120% 140% at 50% 35%,
                     #143C58 0%, #0B2536 50%, #06111B 100%);
  --suite-gradient-surface:radial-gradient(1100px 620px at 50% 35%,
                     #143C58 0%, #0B2536 50%, #06111B 100%);

  /* Accent rule — 1–4px marketing element. NEVER attach it to a logo lockup. */
  --suite-accent-rule:linear-gradient(90deg,
                     transparent 0%, #5FABD6 30%, #6BBF6B 62%, transparent 100%);

  /* === OFFICIAL — typography (kit 19) ==================================== */
  --suite-font:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  --suite-w-display:700;   /* display / hero            */
  --suite-w-heading:600;   /* headings                  */
  --suite-w-ui:500;        /* UI, and eyebrows 500–600  */
  --suite-w-body:400;      /* body                      */
  --suite-track-eyebrow:.25em;  /* uppercase eyebrows, 11–13px */
  --suite-track-heading:.01em;  /* headings: 0 to +0.02em      */
  --suite-track-caps:.12em;     /* all-caps display: +0.06 to +0.20em */
  --suite-lh-body:1.7;          /* body 1.6–1.75 */
  --suite-lh-ui:1.4;
  --suite-lh-display:1.06;

  /* === OFFICIAL — misc ==================================================== */
  --suite-theme-color:#17384F;  /* kit 11 HEAD-SNIPPET */

  /* === DERIVED — text roles ==============================================
     Alpha of a palette colour over a palette ground. Introduces no new hue.
     Ratios measured against their stated ground.                          */
  --suite-on-dark:var(--suite-cloud);              /* 17.63 on infra · 11.35 on navy */
  --suite-on-dark-muted:rgba(242,247,250,.72);     /*  9.37 on infra ·  6.73 on navy */
  --suite-on-light:var(--suite-navy);              /* 11.35 on cloud · 12.24 on white */
  --suite-on-light-muted:rgba(23,56,79,.78);       /*  5.95 on cloud */

  /* === DERIVED — hairlines ===============================================
     Steel is the kit's connector colour. It FAILS as body text (2.83 on navy,
     4.02 on cloud) so it is used for rules and borders only, never text.   */
  --suite-rule-dark:rgba(77,127,158,.34);
  --suite-rule-light:rgba(77,127,158,.28);

  /* === DERIVED — geometry (no kit basis; pending approval) =============== */
  --suite-radius-sm:6px;
  --suite-radius:10px;
  --suite-radius-lg:14px;
  --suite-radius-pill:999px;
  /* The guidelines forbid shadows/glows on the MARK. Kept minimal elsewhere. */
  --suite-shadow:0 24px 60px -30px rgba(6,17,27,.45);

  /* === DERIVED — spacing (no kit basis; pending approval) ================ */
  --suite-s1:8px;  --suite-s2:14px; --suite-s3:22px; --suite-s4:34px;
  --suite-s5:52px; --suite-s6:80px; --suite-s7:112px;
  --suite-measure:66ch;
  --suite-maxw:1180px;
}

/* ============================================================================
   COMPONENTS — built only from the tokens above.
   ============================================================================ */


/* Tailwind Preflight sets border-color:#e5e7eb on *,::before,::after. It is
   invisible while border-width is 0, but any element later given a border
   without an explicit colour would inherit a non-kit value. Point the default
   at the Steel hairline. Scoped to pages that load this sheet, so the
   application and Salud are unaffected. */
/* html-prefixed so this wins on the six pages that load tailwind.min.css AFTER
   this sheet — Preflight uses the identical *,::before,::after selector, so at
   equal specificity load order decided and Tailwind won. (0,0,1) beats (0,0,0)
   without resorting to !important. */
html *,html ::before,html ::after{border-color:var(--suite-rule-light);}


/* Form controls do not inherit font or colour from the page in any browser —
   they fall back to the UA default (Chrome renders input text #101010 in the
   system font). Bring them onto the brand face and palette. */
input,select,textarea,button{font-family:inherit;font-size:inherit;color:var(--suite-navy);}
input::placeholder,textarea::placeholder{color:var(--suite-on-light-muted);}

/* --- type roles ---------------------------------------------------------- */
.suite-display{font-family:var(--suite-font);font-weight:var(--suite-w-display);
  line-height:var(--suite-lh-display);letter-spacing:var(--suite-track-heading);
  font-size:clamp(2.4rem,5.2vw,3.9rem);text-wrap:balance;}
.suite-h2{font-family:var(--suite-font);font-weight:var(--suite-w-heading);
  line-height:1.15;letter-spacing:var(--suite-track-heading);
  font-size:clamp(1.7rem,3vw,2.6rem);text-wrap:balance;}
.suite-h3{font-family:var(--suite-font);font-weight:var(--suite-w-heading);
  line-height:1.32;letter-spacing:var(--suite-track-heading);font-size:1.22rem;}
.suite-body{font-family:var(--suite-font);font-weight:var(--suite-w-body);
  line-height:var(--suite-lh-body);font-size:1.0625rem;}
.suite-eyebrow{font-family:var(--suite-font);font-weight:var(--suite-w-ui);
  font-size:.75rem;letter-spacing:var(--suite-track-eyebrow);text-transform:uppercase;
  line-height:var(--suite-lh-ui);}
.suite-num{font-variant-numeric:tabular-nums;}

/* --- section grounds ----------------------------------------------------- */
.suite-ground-gradient{background:var(--suite-gradient-surface);color:var(--suite-on-dark);}
.suite-ground-infra{background:var(--suite-infra);color:var(--suite-on-dark);}
.suite-ground-navy{background:var(--suite-navy);color:var(--suite-on-dark);}
.suite-ground-cloud{background:var(--suite-cloud);color:var(--suite-on-light);}
.suite-ground-white{background:var(--suite-white);color:var(--suite-on-light);}

/* accent-rule hairline; kit sanctions it under a wordmark on hero sections */
.suite-rule{height:2px;border:0 solid transparent;margin:0;color:transparent;
  background:var(--suite-accent-rule);}

/* --- buttons (DERIVED shape; OFFICIAL colour) ---------------------------- */
.suite-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-family:var(--suite-font);font-weight:var(--suite-w-ui);font-size:.95rem;
  line-height:var(--suite-lh-ui);padding:13px 26px;border-radius:var(--suite-radius);
  border:1px solid transparent;transition:filter .18s ease,border-color .18s ease,
  color .18s ease,background .18s ease;}

/* PRIMARY — the official SUITE gradient. Cloud label is AAA on every stop
   (10.71 at the lightest stop #143C58). Data Blue hairline separates it from a
   dark ground. Signal Orange is NOT used as a button fill: the kit approves it
   as an accent and, on white, only as a fill — never as body copy — and it is
   nowhere approved as a primary button. */
.suite-btn--primary{background:var(--suite-gradient);color:var(--suite-cloud);
  border-color:rgba(95,171,214,.55);}
.suite-btn--primary:hover{filter:brightness(1.18);border-color:var(--suite-blue);}

/* PRIMARY, REVERSED — for use ON the gradient itself, where a gradient fill
   would have no contrast against a gradient ground. Cloud fill, Deep Navy
   label: 11.35, AAA. */
.suite-btn--reversed{background:var(--suite-cloud);color:var(--suite-navy);}
.suite-btn--reversed:hover{background:var(--suite-white);}

/* SECONDARY — Steel hairline, which is Steel's sanctioned connector role.
   Hover goes to Signal Orange, matching the official link hover in the
   guidelines document (a:hover{color:#F5911E}). */
.suite-btn--ghost{background:transparent;color:var(--suite-cloud);
  border-color:var(--suite-rule-dark);}
.suite-btn--ghost:hover{color:var(--suite-orange);border-color:var(--suite-orange);}
.suite-btn--ghost-light{background:transparent;color:var(--suite-navy);
  border-color:var(--suite-rule-light);}
.suite-btn--ghost-light:hover{color:var(--suite-orange);border-color:var(--suite-orange);}

/* --- links (OFFICIAL: guidelines doc uses navy, orange on hover) --------- */
.suite-link{color:var(--suite-navy);text-decoration:none;}
.suite-link:hover{color:var(--suite-orange);}
.suite-link-dark{color:var(--suite-blue);text-decoration:none;}  /* 7.50 on infra */
.suite-link-dark:hover{color:var(--suite-orange);}               /* 8.11 on infra */

/* --- cards / panels (DERIVED) -------------------------------------------- */
.suite-card{background:var(--suite-white);border:1px solid var(--suite-rule-light);
  border-radius:var(--suite-radius-lg);}
.suite-card-dark{background:var(--suite-navy);border:1px solid var(--suite-rule-dark);
  border-radius:var(--suite-radius-lg);}

@media (prefers-reduced-motion:reduce){
  .suite-btn{transition:none;}
}