/* Babalar Inc. — Colors & Type tokens
 * Pulled directly from the Babalar Brandbook PDF.
 * Mountain-peak mark; bold geometric sans; bright tech blue on deep navy.
 */

/* --------------------------------------------------------------------
 * 1. WEB FONTS
 *    Brandbook spec: "Samsung Sharp Sans" (proprietary, not licensed for web).
 *    Substitute: Outfit (display) + Inter (UI text). Closest free geometric
 *    sans with similar wide aperture, near-monoline strokes, and
 *    rationalist counter shapes. Flag for replacement when official files
 *    are licensed.
 * -------------------------------------------------------------------- */
/* Fonts are loaded via <link> in index.html (font-display: swap, preconnect) — see head. */

:root {
  /* ============================================================
   * COLOR — RAW PALETTE
   * Verbatim from brandbook color section.
   * ============================================================ */

  /* Brand */
  --babalar-blue:       #0046FF;   /* primary, "peak blue" */
  --babalar-navy:       #000E47;   /* deep brand navy */
  --babalar-black:      #000000;   /* pure black, used for wordmark */
  --babalar-white:      #FFFFFF;

  /* Tints derived from primary blue (12% → 96% mix with white).
     Used sparingly — surfaces, hover bg, focus rings. */
  --blue-50:            #E5EDFF;
  --blue-100:           #CCDBFF;
  --blue-200:           #99B7FF;
  --blue-300:           #6693FF;
  --blue-400:           #336FFF;
  --blue-500:           #0046FF;   /* = --babalar-blue */
  --blue-600:           #0038CC;
  --blue-700:           #002A99;
  --blue-800:           #001C66;
  --blue-900:           #000E47;   /* = --babalar-navy */

  /* Neutral scale — cool greys, biased very slightly toward navy.
     Use --neutral-* for surfaces, dividers, secondary text. */
  --neutral-0:          #FFFFFF;
  --neutral-50:         #F6F7FB;
  --neutral-100:        #EDEFF5;
  --neutral-200:        #DCE0EA;
  --neutral-300:        #BCC2D2;
  --neutral-400:        #8B92A6;
  --neutral-500:        #5C6478;
  --neutral-600:        #3D4456;
  --neutral-700:        #262C3C;
  --neutral-800:        #161B28;
  --neutral-900:        #0A0E1A;

  /* Semantic — system messaging.
     The brand itself is monochrome blue/navy/black; semantic colors are
     functional only and should NOT bleed into marketing surfaces. */
  --success:            #11A36C;
  --warning:            #E8A317;
  --danger:             #E53935;
  --info:               #0046FF;   /* = brand */

  /* ============================================================
   * COLOR — SEMANTIC TOKENS (USE THESE IN COMPONENTS)
   * ============================================================ */

  /* Foreground */
  --fg-1:               var(--babalar-black);  /* primary text */
  --fg-2:               var(--neutral-600);    /* secondary text */
  --fg-3:               var(--neutral-400);    /* tertiary / placeholders */
  --fg-on-brand:        var(--babalar-white);  /* text on blue/navy fills */
  --fg-link:            var(--babalar-blue);

  /* Background */
  --bg-1:               var(--babalar-white);  /* page */
  --bg-2:               var(--neutral-50);     /* elevated surface */
  --bg-3:               var(--neutral-100);    /* sunken / hover */
  --bg-brand:           var(--babalar-blue);   /* peak-blue fill */
  --bg-brand-deep:      var(--babalar-navy);   /* navy section */
  --bg-inverse:         var(--babalar-black);

  /* Border / divider */
  --border-1:           var(--neutral-200);
  --border-2:           var(--neutral-300);
  --border-strong:      var(--babalar-black);
  --border-brand:       var(--babalar-blue);
  --focus-ring:         color-mix(in srgb, var(--babalar-blue) 35%, transparent);

  /* Action / interactive states */
  --action-primary:           var(--babalar-blue);
  --action-primary-hover:     #0038CC;       /* blue-600 */
  --action-primary-press:     #002A99;       /* blue-700 */
  --action-secondary:         var(--babalar-navy);
  --action-secondary-hover:   #001C66;       /* blue-800 */
  --action-ghost-hover-bg:    var(--blue-50);

  /* ============================================================
   * TYPE — RAW FAMILIES
   * Brandbook primary: Samsung Sharp Sans. Substitute: Outfit.
   * Body / UI: Inter (clean neo-grotesque, pairs cleanly).
   * ============================================================ */
  --font-display:   "Outfit", "Samsung Sharp Sans", "Helvetica Neue", Arial, sans-serif;
  --font-sans:      "Inter", "Samsung Sharp Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Weights — display uses Black/Bold for impact, body uses 400/500/600 */
  --fw-regular:   400;  /* @kind font */
  --fw-medium:    500;  /* @kind font */
  --fw-semibold:  600;  /* @kind font */
  --fw-bold:      700;  /* @kind font */
  --fw-black:     900;  /* @kind font */

  /* Tracking — display always tight, body normal, micro-caps wide */
  --tracking-tight:   -0.02em;  /* @kind font */
  --tracking-normal:  0;        /* @kind font */
  --tracking-wide:    0.08em;   /* @kind font */
  --tracking-mega:    0.18em;   /* @kind font */ /* wide-tracked wordmark subtitle treatment */

  /* Line height */
  --lh-tight:     1.02;  /* @kind font */
  --lh-snug:      1.15;  /* @kind font */
  --lh-base:      1.5;   /* @kind font */
  --lh-loose:     1.7;   /* @kind font */

  /* Type scale — display modular, body comfortable.
     Display tier uses Outfit Black, all-caps optional. */
  --t-display-1:  clamp(56px, 9vw, 128px);   /* @kind font */ /* hero */
  --t-display-2:  clamp(44px, 6vw, 88px);    /* @kind font */
  --t-h1:         clamp(36px, 4vw, 56px);    /* @kind font */
  --t-h2:         clamp(28px, 3vw, 40px);    /* @kind font */
  --t-h3:         24px;  /* @kind font */
  --t-h4:         20px;  /* @kind font */
  --t-h5:         18px;  /* @kind font */
  --t-body-lg:    18px;  /* @kind font */
  --t-body:       16px;  /* @kind font */
  --t-body-sm:    14px;  /* @kind font */
  --t-caption:    12px;  /* @kind font */
  --t-eyebrow:    11px;  /* @kind font */ /* uppercase, wide-tracked, used over titles */

  /* ============================================================
   * SPACING
   * 4px base. Stick to the scale.
   * ============================================================ */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;

  /* ============================================================
   * RADII
   * Babalar leans angular (mountain-peak motif). Default radius
   * is small. Use --radius-pill only on chips/CTAs that warrant it.
   * ============================================================ */
  --radius-none:   0;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     20px;
  --radius-pill:   999px;

  /* ============================================================
   * ELEVATION
   * Cool, navy-tinted shadows — not pure black. Sparing use; the
   * brand prefers flat surfaces with crisp 1px borders.
   * ============================================================ */
  --shadow-xs:  0 1px 2px rgba(0, 14, 71, 0.06);
  --shadow-sm:  0 2px 4px rgba(0, 14, 71, 0.08), 0 1px 2px rgba(0, 14, 71, 0.04);
  --shadow-md:  0 6px 16px rgba(0, 14, 71, 0.10), 0 2px 4px rgba(0, 14, 71, 0.04);
  --shadow-lg:  0 16px 40px rgba(0, 14, 71, 0.14), 0 4px 8px rgba(0, 14, 71, 0.06);
  --shadow-xl:  0 28px 64px rgba(0, 14, 71, 0.18);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ============================================================
   * MOTION
   * Crisp, mechanical — Babalar is industrial/holding-co, not playful.
   * No bounces, no springs.
   * ============================================================ */
  --ease-standard:   cubic-bezier(0.2, 0.0, 0.0, 1.0);  /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0.0, 0.0, 1.0);  /* @kind other */
  --ease-out:        cubic-bezier(0.0, 0.0, 0.2, 1.0);  /* @kind other */
  --dur-instant:  100ms;  /* @kind other */
  --dur-fast:     160ms;  /* @kind other */
  --dur-base:     220ms;  /* @kind other */
  --dur-slow:     360ms;  /* @kind other */

  /* ============================================================
   * LAYOUT
   * ============================================================ */
  --container:        1280px;  /* @kind spacing */
  --container-narrow: 880px;   /* @kind spacing */
  --gutter:           24px;    /* @kind spacing */
}

/* --------------------------------------------------------------------
 * SEMANTIC ELEMENT STYLES
 * Apply these via classnames OR via the bare element if you import
 * this stylesheet at the page level.
 * -------------------------------------------------------------------- */

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

.display-1, h1.display, .t-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--t-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: none;
  margin: 0;
}
.display-2, .t-display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--t-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-3);
}
h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}
h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-h5);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.t-body-lg { font-size: var(--t-body-lg); line-height: var(--lh-loose); }
.t-body-sm { font-size: var(--t-body-sm); }
.t-caption { font-size: var(--t-caption); color: var(--fg-2); }

/* Eyebrow — short label set above titles */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--t-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--babalar-blue);
  display: inline-block;
}

/* Mega wide-tracked subtitle, mirrors the wordmark lockup ("INC." treatment) */
.t-mega {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
}

a, .t-link {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a:hover { color: var(--action-primary-hover); }

code, kbd, samp, pre, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-1);
}
pre {
  padding: var(--space-4);
  overflow: auto;
  line-height: var(--lh-base);
}

/* Selection */
::selection { background: var(--babalar-blue); color: var(--babalar-white); }