/* ============================================================
   Classie — Typography tokens
   Satoshi for all UI. Console is high-density → base 14px.
   Mono stack for CIDs, sensor IDs, policy JSON, code.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  /* Unified to Satoshi per brand direction — identifiers/CIDs/code render in
     Satoshi too. (Revert this to the JetBrains Mono stack if you want a
     distinct monospace family back for technical values.) */
  --font-mono: "Satoshi", "JetBrains Mono", "SF Mono", "SFMono-Regular", ui-monospace,
    "Menlo", "Consolas", monospace;

  /* Weights */
  --fw-light: 300; /* @kind font */
  --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 */

  /* Type scale (px) — dense console + display sizes for marketing */
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 30px;
  --text-5xl: 38px;
  --text-6xl: 48px;
  --text-display: 64px;

  /* Line heights */
  --lh-tight: 1.15; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-normal: 1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* Letter spacing */
  --ls-tighter: -0.02em; /* @kind font */
  --ls-tight: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.02em; /* @kind font */
  --ls-wider: 0.06em; /* @kind font */
  --ls-caps: 0.08em; /* @kind font */

  /* ---- Semantic type roles ---- */
  --role-display: var(--fw-black) var(--text-display) / var(--lh-tight)
    var(--font-sans); /* @kind font */
  --role-h1: var(--fw-bold) var(--text-4xl) / var(--lh-tight) var(--font-sans); /* @kind font */
  --role-h2: var(--fw-bold) var(--text-3xl) / var(--lh-snug) var(--font-sans); /* @kind font */
  --role-h3: var(--fw-medium) var(--text-2xl) / var(--lh-snug) var(--font-sans); /* @kind font */
  --role-body: var(--fw-regular) var(--text-base) / var(--lh-normal)
    var(--font-sans); /* @kind font */
  --role-body-sm: var(--fw-regular) var(--text-sm) / var(--lh-normal)
    var(--font-sans); /* @kind font */
  --role-label: var(--fw-medium) var(--text-sm) / var(--lh-snug)
    var(--font-sans); /* @kind font */
  --role-mono: var(--fw-regular) var(--text-sm) / var(--lh-normal)
    var(--font-mono); /* @kind font */

  /* ============================================================
     OFFICIAL TYPE SCALE — 8 levels, extracted from production (Dashboard,
     Usage Analytics, Inventory). Each level = font shorthand + its
     semantic color mapping(s) (from tokens/colors.css --text-*). Prefer
     these over the --role- and raw --text- sizes for new UI.
     ============================================================ */
  --type-1-display: var(--fw-semibold) 36px/40px var(--font-sans); /* KPI/metric figures @kind font */
  --type-1-display-color: var(--text-primary);

  --type-2-h1: var(--fw-medium) 30px/36px var(--font-sans); /* page title @kind font */
  --type-2-h1-color: var(--text-primary);

  --type-3-h2: var(--fw-medium) 24px/32px var(--font-sans); /* section heading @kind font */
  --type-3-h2-color: var(--text-primary);
  --type-3-h2-brand-weight: var(--fw-semibold); /* header brand logo uses 600 instead of 500 */

  --type-4-kpi-title: var(--fw-semibold) 20px/28px var(--font-sans); /* title inside a metric card @kind font */
  --type-4-kpi-title-color: var(--text-secondary); /* deliberately secondary, not primary */

  --type-5-subtitle: 18px/27px var(--font-sans); /* weight varies 400-500 by use @kind font */
  --type-5-subtitle-desc-weight: var(--fw-regular);
  --type-5-subtitle-desc-color: var(--text-secondary); /* page descriptions */
  --type-5-subtitle-action-weight: var(--fw-medium);
  --type-5-subtitle-action-color: var(--text-brand); /* "Refresh", "View All" */

  --type-6-body: 16px/24px var(--font-sans); /* weight varies by use @kind font */
  --type-6-body-weight: var(--fw-regular); /* general body */
  --type-6-body-color: var(--text-primary);
  --type-6-body-light-weight: var(--fw-light); /* light text variant */
  --type-6-body-emphasis-weight: var(--fw-medium);
  --type-6-body-tab-active-weight: var(--fw-semibold); /* active tab label */
  --type-6-body-meta-color: var(--text-secondary); /* version, "in last 30 days" */
  --type-6-body-action-color: var(--text-brand); /* text-style actions */
  --type-6-body-on-accent-color: var(--text-on-dark); /* on brand-filled buttons */

  --type-7-small: var(--fw-regular) 14px/20px var(--font-sans); /* @kind font */
  --type-7-small-color: var(--text-secondary); /* menu labels */
  --type-7-small-success-color: var(--text-success); /* positive deltas, e.g. "+13.7%" */
  --type-7-small-link-weight: var(--fw-medium);
  --type-7-small-link-color: var(--text-primary); /* minor links */
  --type-7-small-trial-weight: var(--fw-bold);
  --type-7-small-trial-color: var(--text-warning-light); /* "Trial" tag */
  --type-7-small-on-light-weight: var(--fw-semibold);
  --type-7-small-on-light-color: var(--text-on-light); /* buttons on light fill */

  --type-8-caption: 12px/16px var(--font-sans); /* line-height compresses to 12px on dense badges @kind font */
  --type-8-caption-badge-weight: var(--fw-bold);
  --type-8-caption-badge-color: var(--text-danger-dark); /* on light-red notification badges */
  --type-8-caption-tag-weight: var(--fw-semibold);
  --type-8-caption-tag-color: var(--text-success); /* "Early Access" */

  /* ---- Console page/card roles (extracted from the live product) ----
     Fixed px line-heights, medium weight — the console runs lighter and
     looser than the bold marketing roles above. Pair with --text-primary
     for titles/values and --text-secondary for descriptions. */
  --role-page-title: var(--fw-medium) var(--text-4xl) / 36px var(--font-sans); /* @kind font */
  --role-page-desc: var(--fw-regular) var(--text-xl) / 28px var(--font-sans); /* @kind font */
  --role-card-title: var(--fw-medium) var(--text-xl) / var(--lh-snug)
    var(--font-sans); /* @kind font */
  --role-metric: var(--fw-semibold) var(--text-3xl) / var(--lh-tight)
    var(--font-sans); /* @kind font */
  --role-muted: var(--fw-medium) var(--text-xs) / var(--lh-normal)
    var(--font-sans); /* @kind font */
}