/* ============================================================
   Kelas Sekejap — Design Tokens (Say it with confidence, v7)
   Source of truth for colour, type, spacing, radii, shadows, motion.
   Includes semantic aliases (--surface-*, --text-*, --action-*, --state-*)
   — prefer those in product UI. Every component reads from these.
   ============================================================ */

:root {
  /* ---- Primary · recognition & behaviour ---- */
  --ks-peach: #f9e9dc;  /* warm peach / the app canvas — the default background · Ink text */
  --ks-haze: #efebe1;   /* warm neutral / quiet insets and inputs · Ink text */
  --ks-blue: #2557ff;   /* loud brand anchor / hero surfaces · White text */
  --ks-flame: #e64c09;  /* the action colour / one CTA per view · INK text (A1) — white fails AA at body sizes; white icons ok */

  /* ---- Secondary · content, rewards, states ---- */
  --ks-sunflower: #f0c84b; /* highlights & reward moments · Ink text */
  --ks-pulse: #f49eaf;     /* social, warmth, campaign emphasis · Ink text */
  --ks-moss: #2fa36b;      /* progress, growth, support · Ink text — white fails AA at body sizes; white icons ok */
  --ks-spark: #f68868;     /* celebrations, friendly alerts · Ink text */
  --ks-paper: #ffffff;     /* cards, modals, content surfaces · Ink text */
  --ks-ink: #101014;       /* text, outlines, icons, contrast · White text */

  /* ---- Utility & ink alphas ---- */
  --ks-disabled-fill: #dedbd3;
  --ks-ink-45: rgba(16, 16, 20, 0.45); /* disabled text */
  --ks-ink-18: rgba(16, 16, 20, 0.18); /* disabled border */
  --ks-ink-10: rgba(16, 16, 20, 0.10); /* hairline dividers */
  --ks-ink-72: rgba(16, 16, 20, 0.72); /* body copy on light */
  --ks-ink-60: rgba(16, 16, 20, 0.60); /* muted labels on light */
  --ks-ink-50: rgba(16, 16, 20, 0.50); /* decorative/large mono only — fails AA at label sizes (use ink-60 for eyebrows) */
  /* Translucent alphas — these two are RESERVED, do not reuse for selection.
     They sit over a known light background; over a colour block they'd let the
     surface bleed through. For selected states use the opaque --ks-tint-* set. */
  --ks-flame-tint: rgba(230, 76, 9, 0.10);  /* error surface ONLY */
  --ks-blue-tint: rgba(37, 87, 255, 0.20);  /* input focus glow ONLY */

  /* ---- Selection tints · OPAQUE (accent blended 14% over Paper) ----
     The pale fill of a chosen option row / filled OTP box. Opaque on purpose:
     option rows sit on full-colour surfaces, and a translucent tint would take
     on the block colour underneath. All carry Ink text (≥16:1). */
  --ks-tint-flame:     #fce6dd;
  --ks-tint-blue:      #e1e8ff;
  --ks-tint-moss:      #e2f2ea;
  --ks-tint-sunflower: #fdf7e6;
  --ks-tint-pulse:     #fef1f4;
  --ks-tint-spark:     #feeeea;

  /* ---- Semantic aliases (prefer these in product UI) ---- */
  --surface-base: var(--ks-peach);  /* the app canvas / default page */
  --surface-card: var(--ks-paper);  /* content cards, modals */
  --surface-inset: var(--ks-haze);  /* inputs, wells, insets */
  --surface-hero: var(--ks-blue);   /* marketing / cover surfaces */
  --surface-ink: var(--ks-ink);     /* dark surfaces */
  --surface-option: var(--ks-paper);       /* interactive rows/pills ON a colour block */
  --surface-selected: var(--ks-tint-blue); /* default chosen-option fill */

  --text-body: var(--ks-ink);       /* primary text */
  --text-muted: var(--ks-ink-60);   /* secondary text */
  --text-label: var(--ks-ink-60);   /* mono eyebrow labels — ink-60 passes AA at label sizes; ink-50 does not */
  --text-on-dark: #ffffff;          /* text on Ink / Blue / Flame / Moss */

  --action-primary: var(--ks-flame); /* the one loud CTA per view */
  --action-anchor: var(--ks-blue);   /* brand / navigational primary */
  --state-success: var(--ks-moss);   /* progress, growth, done */
  --state-reward: var(--ks-sunflower); /* highlights & rewards */
  --state-error: var(--ks-flame);    /* blocking errors */
  --state-warn: var(--ks-spark);     /* gentle, non-blocking warnings */

  --border-ink: var(--ks-ink);       /* the firm outline colour, everywhere */
}

/* ============================================================
   Kelas Sekejap — Typography tokens (Say it with confidence v7)
   Three families, three jobs. This brand runs HEAVY — 700 is the floor.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --ks-font-display: 'Archivo Black', Impact, sans-serif;              /* stacked uppercase headlines */
  --ks-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; /* body & UI */
  --ks-font-mono: 'JetBrains Mono', ui-monospace, monospace;           /* labels, tags, eyebrows */

  /* ---- Display headline defaults (Archivo Black) ---- */
  --ks-display-tracking: -0.075em; /* range -0.065em (large) to -0.085em (huge) */
  --ks-display-leading: 0.82;      /* range 0.80 to 0.86 — very tight, stacked */

  /* ---- Body weights — 700 is the floor ---- */
  --ks-weight-bold: 700;
  --ks-weight-extrabold: 800;
  --ks-weight-black: 900;          /* buttons */

  /* ---- Mono label defaults ---- */
  --ks-mono-tracking: 0.07em;      /* range 0.06em to 0.10em, uppercase */

  /* ---- Semantic type-role aliases ---- */
  --font-display: var(--ks-font-display);
  --font-body: var(--ks-font-body);
  --font-label: var(--ks-font-mono);
}

/* ============================================================
   Kelas Sekejap — Spacing tokens (Say it with confidence v7)
   4px base scale, keyed 1–10. Use tokens, never arbitrary values.
   ============================================================ */

:root {
  --ks-space-1: 4px;   /* hairline gaps, icon-to-label */
  --ks-space-2: 8px;   /* chip padding, tight stacks */
  --ks-space-3: 12px;  /* inline gaps, list rows */
  --ks-space-4: 16px;  /* default element gap */
  --ks-space-5: 20px;  /* screen padding, min card padding */
  --ks-space-6: 24px;  /* card padding, section gap */
  --ks-space-7: 32px;  /* large section gap */
  --ks-space-8: 40px;  /* hero internal padding */
  --ks-space-9: 48px;  /* block separation on scroll */
  --ks-space-10: 64px; /* major marketing rhythm */
  --ks-space-base: 4px;
}

/* ============================================================
   Kelas Sekejap — Radii, borders, elevation, focus & motion (Say it with confidence v7)
   Generous radii + a firm 2px Ink outline + a HARD offset shadow (never blur)
   = the signature sticker cut-out feel. Soft blur is marketing/hero ONLY.
   ============================================================ */

:root {
  /* ---- Radii ---- */
  --ks-radius-sm: 14px;    /* inputs */
  --ks-radius-md: 20px;    /* chips, list rows, insets */
  --ks-radius-lg: 28px;    /* standard cards */
  --ks-radius-xl: 36px;    /* hero & marketing */
  --ks-radius-pill: 999px; /* buttons, tags */

  /* ---- Border · the firm Ink outline, on every surface ---- */
  --ks-border-width: 2px;
  --ks-border: 2px solid var(--ks-ink);

  /* ---- Elevation · hard offset shadows (NEVER blur in-product) ---- */
  --ks-shadow-sm: 4px 4px 0 var(--ks-ink);     /* small chips */
  --ks-shadow-button: 5px 5px 0 var(--ks-ink); /* buttons, pills, tags */
  --ks-shadow-card: 8px 8px 0 var(--ks-ink);   /* cards */
  --ks-shadow-hover: 7px 7px 0 var(--ks-ink);  /* hover lift */
  /* Soft blur — MARKETING & hero only, never inside learning UI */
  --ks-shadow-soft: 0 22px 60px rgba(16, 16, 20, 0.14);

  /* ---- Focus ring · visible Blue, offset by the canvas (Peach) ---- */
  --ks-focus-ring: 0 0 0 3px var(--ks-peach), 0 0 0 6px var(--ks-blue);
  /* On a full-colour block the Blue ring disappears against Blue and fights
     Flame/Pulse. Ink reads on every brand surface — use this inside colour blocks. */
  --ks-focus-ring-on-color: 0 0 0 3px var(--ks-paper), 0 0 0 6px var(--ks-ink);

  /* ---- Motion ---- */
  --ks-press-offset: 5px; /* how far a pressed element travels into its shadow */
  --ks-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ks-dur-press: 0.08s; /* @kind other */

  /* ---- Semantic aliases ---- */
  --radius-input: var(--ks-radius-sm);
  --radius-card: var(--ks-radius-lg);
  --radius-hero: var(--ks-radius-xl);
  --shadow-card: var(--ks-shadow-card);
  --shadow-button: var(--ks-shadow-button);
}

/* ============================================================
   Kelas Sekejap — Foundations: type scale, breakpoints, motion
   (Say it with confidence v7). Designer-facing scales that back FOUNDATIONS.md.
   Sizes are the desktop value; the mobile value follows in a comment.
   One Display element per view — same discipline as "one loud primary".
   ============================================================ */

:root {
  /* ---- Type scale · rem-friendly, 16px base ---- */
  --ks-text-display-xl: 64px; /* mobile 40px · lh .95 · Archivo Black */
  --ks-text-display-l:  40px; /* mobile 32px · lh 1.0  · Archivo Black */
  --ks-text-heading-l:  28px; /* lh 1.1  · Plus Jakarta 700 */
  --ks-text-heading-m:  20px; /* lh 1.25 · card titles · 700 */
  --ks-text-body-l:     18px; /* lh 1.5  · intros & prompts */
  --ks-text-body-m:     16px; /* lh 1.5  · default reading (mobile floor) */
  --ks-text-body-s:     14px; /* lh 1.45 · supporting detail */
  --ks-text-label:      12px; /* +8% tracking · UPPER · JetBrains Mono */

  /* ---- Breakpoints · mobile-first (primary surface is a phone) ---- */
  --ks-bp-sm: 480px;  /* large phone */
  --ks-bp-md: 768px;  /* tablet */
  --ks-bp-lg: 1024px; /* laptop */
  --ks-bp-xl: 1280px; /* desktop */

  /* ---- Containers ---- */
  --ks-container-reading: 720px;  /* content / reading width */
  --ks-container-app: 1120px;     /* app & page max */

  /* ---- Motion durations (pair with --ks-ease) ---- */
  --ks-dur-fast: 150ms;   /* hover */
  --ks-dur-base: 200ms;   /* most transitions */
  --ks-dur-slow: 300ms;   /* entrances, toasts */
  --ks-dur-reward: 500ms; /* celebrations */
  /* Note: the signature press stays snappy at --ks-dur-press (0.08s). */
}