/* ============================================================
   ALEKSEY LOBOV — DESIGN SYSTEM
   colors_and_type.css
   Foundation: disciplined minimalism. Monochrome ink-on-white,
   grotesque display type, monospaced figures for market data.
   ============================================================ */

/* ---- Webfonts (Google Fonts CDN — Onest matches the reference; see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500&family=Onest:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  /* ============================================================
     COLOR — INK & PAPER
     A near-monochrome palette. Color is a privilege, not a default.
     ============================================================ */

  /* Paper / surfaces — warm-neutral whites and greys */
  --paper:        #FFFFFF;   /* base page */
  --surface:      #F4F4F2;   /* panels, cards (the AIR grey) */
  --surface-2:    #EDEDEA;   /* nested / pressed surfaces */
  --hairline:     #E2E2DE;   /* 1px borders, dividers */
  --hairline-2:   #D2D2CD;   /* stronger dividers */

  /* Ink / foreground — near-black, never pure #000 */
  --ink:          #0E0E0C;   /* primary text, wordmark, pills */
  --ink-2:        #57574F;   /* secondary text */
  --ink-3:        #8C8C83;   /* tertiary, captions, muted labels */
  --ink-4:        #B6B6AD;   /* disabled, faint */

  /* Inverse (on ink surfaces) */
  --paper-on-ink: #FAFAF8;
  --ink-on-ink-2: #A6A69D;

  /* ============================================================
     COLOR — MARKET SEMANTICS
     Used ONLY for numeric / market data. Tiny, surgical, never decorative.
     ============================================================ */
  --up:           #15803D;   /* gain / long / positive */
  --up-soft:      #E8F2EC;
  --down:         #C2362B;   /* loss / short / negative */
  --down-soft:    #F6EAE8;
  --signal:       #0E0E0C;   /* neutral emphasis = ink itself */

  /* ============================================================
     TYPE — FAMILIES
     ============================================================ */
  /* Display = thin geometric (matches the A|L logo's Futura-like strokes) */
  --font-display: 'Jost', system-ui, sans-serif;
  /* Body / UI = Onest, the neo-grotesque used by the reference (aircenter.space) */
  --font-sans:    'Onest', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Display weights — the brand lives LIGHT, never heavy */
  --w-thin:    200;
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;

  /* ============================================================
     TYPE — SCALE (1.0 = 16px base)
     ============================================================ */
  --t-display:   clamp(3.5rem, 8vw, 7rem);   /* hero wordmark / huge */
  --t-h1:        clamp(2.5rem, 5vw, 4rem);
  --t-h2:        clamp(1.75rem, 3vw, 2.5rem);
  --t-h3:        1.5rem;
  --t-h4:        1.125rem;
  --t-body-lg:   1.25rem;
  --t-body:      1rem;
  --t-small:     0.875rem;
  --t-label:     0.6875rem;   /* uppercase tracked labels */

  /* Tracking — the logo is airy and wide-set */
  --track-tight:  -0.01em;
  --track-normal: 0;
  --track-wide:   0.22em;    /* the signature wordmark spacing */
  --track-label:  0.16em;    /* wide-tracked micro-caps */
  --track-mono:   0.02em;

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ============================================================
     RADII — minimal. Pills for actions, sharp for structure.
     ============================================================ */
  --r-none: 0px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 999px;

  /* ============================================================
     SHADOW — barely-there. Depth via hairlines, not drop shadows.
     ============================================================ */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(14,14,12,0.04);
  --shadow-md:   0 8px 30px rgba(14,14,12,0.06);
  --shadow-pill: 0 2px 12px rgba(14,14,12,0.18);

  /* Motion */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    140ms;
  --dur:         260ms;
  --dur-slow:    520ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply via classes; mirrors the token scale above.
   ============================================================ */

.ds-display {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-display);
  line-height: 1.0;
  letter-spacing: var(--track-wide);
  color: var(--ink);
  text-transform: uppercase;
}

.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  font-size: var(--t-h1);
  line-height: 1.04;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.ds-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--ink);
}

.ds-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--ink);
}

.ds-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--ink-2);
}

.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--ink-2);
}

.ds-small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-3);
}

/* The signature wide-tracked uppercase label */
.ds-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The wordmark text style — thin geometric, very wide tracking */
.ds-wordmark {
  font-family: var(--font-display);
  font-weight: var(--w-light);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--ink);
}

/* Monospaced market data — tabular figures */
.ds-data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-mono);
  color: var(--ink);
}
.ds-data--up   { color: var(--up); }
.ds-data--down { color: var(--down); }

/* ============================================================
   SCROLL REVEAL — blocks rise + fade as they enter the viewport.
   Elements are tagged with [data-reveal] by reveal.js; the
   per-element stagger delay is set inline. Base state is hidden;
   .is-in is added by an IntersectionObserver when in view.
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 820ms var(--ease-out), transform 820ms var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---- AIR-style reveal variants (motion only — colours/type/layout unchanged) ----
   Lifted from the reference site's scroll choreography: headings unmask with a
   clip-wipe, media panels clip-in while their image settles from a slight zoom. */

/* heading clip-wipe: the line rises a touch and unmasks from below */
[data-reveal="head"] {
  opacity: 1;
  transform: translateY(0.34em);
  clip-path: inset(-0.14em 0 100% 0);
  transition: clip-path 1000ms var(--ease-out), transform 1000ms var(--ease-out);
  will-change: clip-path, transform;
}
[data-reveal="head"].is-in {
  transform: none;
  clip-path: inset(-0.14em 0 -0.24em 0);
}

/* media clip-in: the panel wipes open while the image inside eases out of a zoom */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1100ms var(--ease-out);
  will-change: clip-path;
}
[data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
[data-reveal="clip"] img {
  transform: scale(1.09);
  transition: transform 1500ms var(--ease-out);
  will-change: transform;
}
[data-reveal="clip"].is-in img { transform: none; }

/* scroll-linked parallax layers (transform driven by reveal.js) */
[data-parallax] { will-change: transform; }

/* Account chip in the subpage header — hide on narrow screens
   (the enroll form has its own login/logout controls). */
@media (max-width: 640px) { .subheader-account { display: none; } }

/* Respect users who prefer no motion — show everything immediately. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="head"],
  [data-reveal="clip"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-reveal="clip"] img { transform: none !important; }
  [data-parallax] { transform: none !important; }
}