/* ==========================================================================
   TOKENS — TYPOGRAPHY & COLORS (JOMI)
   ========================================================================== */

:root {
  /* Typography — families & rhythm */
  --jomi-font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", sans-serif;
  --jomi-line-height-heading: 1.2;
  --jomi-letter-spacing-tight: -0.01em;
  --jomi-letter-spacing-normal: 0;

  /* === Font sizes (body ~14px at mid-range) === */
  --jomi-font-size-micro: clamp(0.68rem, 0.64rem + 0.20vw, 0.76rem);  /* ~11–12px */
  --jomi-font-size-small: clamp(0.78rem, 0.74rem + 0.25vw, 0.86rem);  /* ~12–13px */
  --jomi-font-size-body:  clamp(0.85rem, 0.82rem + 0.25vw, 0.92rem);  /* ~13.5–14.5px */

  --jomi-font-size-h6: clamp(0.95rem, 0.90rem + 0.35vw, 1.15rem);
  --jomi-font-size-h5: clamp(1.10rem, 0.98rem + 0.60vw, 1.35rem);
  --jomi-font-size-h4: clamp(1.22rem, 1.02rem + 0.85vw, 1.55rem);
  --jomi-font-size-h3: clamp(1.45rem, 1.15rem + 1.20vw, 1.9rem);
  --jomi-font-size-h2: clamp(1.8rem, 1.35rem + 1.7vw, 2.35rem);
  --jomi-font-size-h1: clamp(2.1rem, 1.55rem + 2.4vw, 3.1rem);

  /* === Line-heights tuned to smaller sizes === */
  --jomi-line-height-micro: 1.45;
  --jomi-line-height-small: 1.48;
  --jomi-line-height-body:  1.55;

  --jomi-line-height-h6: 1.35;
  --jomi-line-height-h5: 1.32;
  --jomi-line-height-h4: 1.28;
  --jomi-line-height-h3: 1.24;
  --jomi-line-height-h2: 1.2;
  --jomi-line-height-h1: 1.15;




  /* Typography — weights */
  --jomi-font-weight-regular: 400;
  --jomi-font-weight-medium: 500;
  --jomi-font-weight-semibold: 600;
  --jomi-font-weight-bold: 700;

  /* Colors — brand palette (source of truth) */
  --jomi-color-bg: #ffffff;
  --jomi-color-surface: #e4ecf0; /* light grey */
  --jomi-color-text: #111318;
  --jomi-color-text-muted: #5f6470;

  --jomi-color-primary: #1f5071; /* dark navy */
  --jomi-color-secondary: #5e8297; /* grey-blue */
  --jomi-color-accent: #ec5845; /* orange-red */

  --jomi-color-border: #e4ecf0;
  --jomi-color-link: var(--jomi-color-primary);
  --jomi-color-link-hover: color-mix(
    in srgb,
    var(--jomi-color-primary) 85%,
    black
  );

  /* Colors — semantic aliases (use in components) */
  /* Text */
  --jomi-text-body: var(--jomi-color-text);
  --jomi-text-muted: var(--jomi-color-text-muted);
  --jomi-text-heading: var(--jomi-color-primary);
  --jomi-text-accent: var(--jomi-color-accent);

  /* Surfaces */
  --jomi-surface-page: var(--jomi-color-bg);
  --jomi-surface-card: var(--jomi-color-surface);
  --jomi-surface-elevated: #f5f9fb; /* slightly lighter than surface */

  /* Borders/lines */
  --jomi-border-default: var(--jomi-color-border);
  --jomi-border-strong: color-mix(in srgb, var(--jomi-color-border) 70%, black);

  /* Buttons / interactive */
  --jomi-btn-bg: var(--jomi-color-primary);
  --jomi-btn-bg-hover: color-mix(in srgb, var(--jomi-color-primary) 88%, black);
  --jomi-btn-text: #ffffff;

  --jomi-btn-secondary-bg: var(--jomi-color-secondary);
  --jomi-btn-secondary-bg-hover: color-mix(
    in srgb,
    var(--jomi-color-secondary) 88%,
    black
  );
  --jomi-btn-secondary-text: #ffffff;

  --jomi-btn-ghost-text: var(--jomi-color-primary);
  --jomi-btn-ghost-border: var(--jomi-color-primary);
  --jomi-btn-ghost-hover-bg: color-mix(
    in srgb,
    var(--jomi-color-primary) 12%,
    white
  );

  /* Focus & selection */
  --jomi-focus-ring: color-mix(
    in srgb,
    var(--jomi-color-primary) 30%,
    transparent
  );
  --jomi-selection-bg: color-mix(in srgb, var(--jomi-color-accent) 28%, white);
  --jomi-selection-text: #111318;

  /* Contextual tokens for dark/secondary backgrounds */
  --jomi-text-on-dark: #ffffff;
  --jomi-link-on-dark: #ffffff;
  --jomi-link-on-dark-hover: color-mix(in srgb, #ffffff 85%, black);

  --jomi-text-on-secondary: #ffffff;
  --jomi-link-on-secondary: #ffffff;
  --jomi-link-on-secondary-hover: color-mix(in srgb, #ffffff 85%, black);
}