/*
 * ShiftCore design tokens - single source of truth.
 *
 * Consumed by:
 *  - src/styles.css (React app / Tailwind)
 *  - public/site.css (static institutional site)
 *
 * All tokens are namespaced with --sc- so they never collide with the
 * shadcn/Tailwind theme variables already defined in src/styles.css.
 * No section may use hardcoded spacing, type, color, radius or shadow values.
 */

:root {
  /* ---------- Spacing (4px scale) ---------- */
  --sc-space-1: 4px;
  --sc-space-2: 8px;
  --sc-space-3: 12px;
  --sc-space-4: 16px;
  --sc-space-6: 24px;
  --sc-space-8: 32px;
  --sc-space-12: 48px;
  --sc-space-16: 64px;
  --sc-space-24: 96px;
  --sc-space-32: 128px;

  /* ---------- Layout ---------- */
  --sc-section-py: var(--sc-space-24);
  --sc-section-gap: var(--sc-space-12); /* section header -> content */
  --sc-grid-gap: var(--sc-space-6); /* card to card */
  --sc-container-max: 1200px;
  --sc-container-px: var(--sc-space-6);

  /* ---------- Typography ---------- */
  --sc-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Helvetica, Arial, sans-serif;
  --sc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  --sc-text-xs: 12px;
  --sc-leading-xs: 16px;
  --sc-text-sm: 14px;
  --sc-leading-sm: 20px;
  --sc-text-base: 16px;
  --sc-leading-base: 24px;
  --sc-text-lg: 18px;
  --sc-leading-lg: 28px;
  --sc-text-xl: 20px;
  --sc-leading-xl: 28px;
  --sc-text-2xl: 24px;
  --sc-leading-2xl: 32px;
  --sc-text-3xl: 30px;
  --sc-leading-3xl: 36px;
  --sc-text-4xl: 36px;
  --sc-leading-4xl: 40px;
  --sc-text-5xl: 48px;
  --sc-leading-5xl: 52px;
  --sc-text-6xl: 60px;
  --sc-leading-6xl: 64px;

  --sc-tracking-wide: 0.08em;

  /* Fixed hierarchy (desktop values; mobile overrides below) */
  --sc-h1-size: var(--sc-text-5xl);
  --sc-h1-leading: var(--sc-leading-5xl);
  --sc-h2-size: var(--sc-text-4xl);
  --sc-h2-leading: var(--sc-leading-4xl);
  --sc-h3-size: var(--sc-text-xl);
  --sc-h3-leading: var(--sc-leading-xl);

  /* ---------- Color ---------- */
  --sc-bg: #0a0b0a;
  --sc-bg-elevated: #101210;
  --sc-bg-sunken: #060706;
  --sc-border: #1e211e;
  --sc-border-strong: #343833;
  --sc-fg: #eceee9;
  --sc-fg-muted: #a9ada6;
  --sc-fg-subtle: #7a7d78;
  --sc-accent: #c8ff4d;
  --sc-accent-fg: #0a0b0a;
  --sc-success: #10b981;
  --sc-warning: #f59e0b;

  /* Per-product accents. Used ONLY inside that product's card
     (hover border, status dot, icon) - never on reading text. */
  --sc-accent-absoluto: #3b82f6;
  --sc-accent-canteiro: #f59e0b;
  --sc-accent-kefi: #968ae0;
  --sc-accent-koddos: #10b981;
  --sc-accent-tectio: #8a4527;
  --sc-accent-shineluster: #06b6d4;
  --sc-accent-jurisomnis: #6366f1;
  /* brand navy #0b1733 is indistinguishable from --sc-bg; lifted for visibility */
  --sc-accent-quorum: #3f63b8;
  --sc-accent-agroacao: #2d6a4f;

  /* ---------- Radius ---------- */
  --sc-radius-sm: 6px; /* badges, inputs */
  --sc-radius-md: 10px; /* buttons, small cards */
  --sc-radius-lg: 16px; /* product cards, large blocks */

  /* ---------- Elevation ---------- */
  --sc-shadow-none: none;
  --sc-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);

  /* ---------- Motion ---------- */
  --sc-motion-button: 150ms;
  --sc-motion-hover: 200ms;
  --sc-motion-reveal: 400ms;
  --sc-motion-ambient: 8s;
  --sc-motion-stagger: 60ms;
  --sc-ease-out: ease-out;
  --sc-transition: var(--sc-motion-hover) var(--sc-ease-out);
}

@media (max-width: 768px) {
  :root {
    --sc-section-py: var(--sc-space-16);
    --sc-container-px: var(--sc-space-4);
    --sc-h1-size: var(--sc-text-4xl);
    --sc-h1-leading: var(--sc-leading-4xl);
    --sc-h2-size: var(--sc-text-3xl);
    --sc-h2-leading: var(--sc-leading-3xl);
  }
}