/* YIVA — flattened site stylesheet (built from design-system tokens). */


/* ===== tokens/fonts.css ===== */
/* ============================================================
   YIVA — Webfonts
   Display : Archivo        (technical grotesque, matches the
                             bold angular YIVA wordmark)
   Text/UI : IBM Plex Sans  (engineering-grade humanist sans)
   Mono    : IBM Plex Mono  (specs, codes, data labels)
   NOTE: The original wordmark uses a proprietary typeface;
   Archivo is the closest open substitute. Flagged for review.
   ============================================================ */
/* webfonts self-hosted in fonts.css — no external font requests (GDPR-friendly). */

/* ===== tokens/colors.css ===== */
/* ============================================================
   YIVA — Color tokens
   Derived from the YIVA mark (orange / green / blue swirl)
   and the deep-blue wordmark.
   ============================================================ */
:root {
  /* ---- Brand core ---- */
  --yiva-blue-900: #003B6B;   /* deepest — headings on light, dark sections */
  --yiva-blue-800: #004C87;
  --yiva-blue-700: #0061A8;   /* PRIMARY — wordmark blue */
  --yiva-blue-600: #0072BC;
  --yiva-blue-500: #0079C1;   /* swirl bright blue */
  --yiva-blue-400: #3897D2;
  --yiva-blue-300: #7FBCE3;
  --yiva-blue-200: #B9DBF0;
  --yiva-blue-100: #E2F0FA;
  --yiva-blue-50:  #F1F8FD;

  /* ---- Brand accents (from the swirl) ---- */
  --yiva-orange:      #F04818;  /* vermilion petal */
  --yiva-orange-600:  #D43C10;
  --yiva-orange-100:  #FDE6DD;
  --yiva-green:       #00A878;  /* emerald petal */
  --yiva-green-600:   #008A63;
  --yiva-green-100:   #D5F2E8;

  /* ---- Neutrals (cool industrial grays) ---- */
  --gray-900: #111A22;
  --gray-800: #1E2A35;
  --gray-700: #324250;
  --gray-600: #4C5E6D;
  --gray-500: #6B7C8A;
  --gray-400: #93A2AE;
  --gray-300: #C2CCD4;
  --gray-200: #E0E6EB;
  --gray-150: #EAEEF1;
  --gray-100: #F1F4F6;
  --gray-50:  #F7F9FB;
  --white:    #FFFFFF;
  --black:    #0A1118;

  /* ---- Semantic surface ---- */
  --surface-page:      var(--white);
  --surface-subtle:    var(--gray-50);
  --surface-muted:     var(--gray-100);
  --surface-card:      var(--white);
  --surface-inverse:   var(--yiva-blue-900);
  --surface-brand:     var(--yiva-blue-700);
  --surface-brand-soft:var(--yiva-blue-50);

  /* ---- Semantic text ---- */
  --text-strong:   var(--gray-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-faint:    var(--gray-400);
  --text-on-brand: var(--white);
  --text-on-dark:  #DCE6EE;
  --text-link:     var(--yiva-blue-700);
  --text-link-hover: var(--yiva-blue-900);

  /* ---- Borders / dividers ---- */
  --border-subtle: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-brand:  var(--yiva-blue-700);

  /* ---- Status ---- */
  --success:   #1B8C5A;
  --success-bg:#E2F4EB;
  --warning:   #E08A00;
  --warning-bg:#FCF0D9;
  --danger:    #D43C10;
  --danger-bg: #FCE6DE;
  --info:      var(--yiva-blue-600);
  --info-bg:   var(--yiva-blue-100);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px rgba(0, 97, 168, 0.35);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   YIVA — Typography tokens
   ============================================================ */
:root {
  /* Families */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

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

  /* Fluid type scale (desktop-first, rem) */
  --text-display: 4.5rem;   /* hero */
  --text-h1:      3.25rem;
  --text-h2:      2.375rem;
  --text-h3:      1.75rem;
  --text-h4:      1.375rem;
  --text-h5:      1.125rem;
  --text-lg:      1.1875rem; /* lead paragraph */
  --text-base:    1rem;
  --text-sm:      0.875rem;
  --text-xs:      0.75rem;
  --text-eyebrow: 0.8125rem; /* uppercase label */

  /* Line heights */
  --lh-tight:   1.04; /* @kind font */
  --lh-snug:    1.18; /* @kind font */
  --lh-heading: 1.22; /* @kind font */
  --lh-body:    1.62; /* @kind font */
  --lh-relaxed: 1.75; /* @kind font */

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind font */
  --ls-display: -0.025em; /* @kind font */
  --ls-normal:  0; /* @kind font */
  --ls-wide:    0.04em; /* @kind font */
  --ls-eyebrow: 0.16em;  /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   YIVA — Spacing, radii, shadows, layout, motion
   ============================================================ */
: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: 2.5rem;    /* 40 */
  --space-8: 3rem;      /* 48 */
  --space-9: 4rem;      /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* Section rhythm */
  --section-y: clamp(4rem, 8vw, 7.5rem); /* @kind spacing */
  --container-max: 1200px;
  --container-wide: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Radii — squared-off, engineered feel */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows — cool, restrained, industrial */
  --shadow-xs: 0 1px 2px rgba(17, 26, 34, 0.06);
  --shadow-sm: 0 1px 3px rgba(17, 26, 34, 0.08), 0 1px 2px rgba(17, 26, 34, 0.05);
  --shadow-md: 0 4px 12px rgba(17, 26, 34, 0.08), 0 2px 4px rgba(17, 26, 34, 0.05);
  --shadow-lg: 0 12px 28px rgba(17, 26, 34, 0.12), 0 4px 8px rgba(17, 26, 34, 0.06);
  --shadow-xl: 0 24px 60px rgba(8, 30, 50, 0.18);
  --shadow-brand: 0 12px 28px rgba(0, 97, 168, 0.22);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-mid: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* Z-index */
  --z-header: 100; /* @kind other */
  --z-overlay: 500; /* @kind other */
  --z-modal: 600; /* @kind other */
  --z-toast: 700; /* @kind other */
}

/* ===== tokens/base.css ===== */
/* ============================================================
   YIVA — Base element styles & shared primitives
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); letter-spacing: var(--ls-display); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
p  { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

/* ---- Shared utility primitives (used by cards & kits) ---- */
.yiva-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--yiva-blue-700);
}
.yiva-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--theme-accent, var(--yiva-orange));
}

.yiva-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Brand swirl gradient bar — accent line motif */
.yiva-accentbar {
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--yiva-orange) 0%, var(--yiva-orange) 33%,
    var(--yiva-green) 33%, var(--yiva-green) 66%,
    var(--yiva-blue-500) 66%, var(--yiva-blue-500) 100%);
}

::selection { background: var(--yiva-blue-100); color: var(--yiva-blue-900); }