/* MtgOS Design System — Colors & Type
 * Source: src/app/globals.css (mtgos repo @ main)
 * Fonts: Grift (headings, display — proprietary, see fonts/README.md),
 *        JUST Sans (body, UI — brand-supplied woff/woff2 in fonts/),
 *        Geist Mono (code, numerics)
 */

/* --- Fonts ---------------------------------------------------------------- */
/* JUST Sans — brand sans. Used for body, UI, labels, numerics fallback.
 * Supplied as woff2/woff from fonts/. Full weight axis: ExLight 200, Light
 * 300, Regular 400, Medium 500, SemiBold 600, Bold 700, ExBold 800.
 */
@font-face { font-family: "JUST Sans"; font-weight: 200; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_ExLight.woff2") format("woff2"),
       url("fonts/JUST_Sans_ExLight.woff")  format("woff"); }
@font-face { font-family: "JUST Sans"; font-weight: 300; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_Light.woff2") format("woff2"),
       url("fonts/JUST_Sans_Light.woff")  format("woff"); }
@font-face { font-family: "JUST Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_Regular.woff2") format("woff2"),
       url("fonts/JUST_Sans_Regular.woff")  format("woff"); }
@font-face { font-family: "JUST Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_Medium.woff2") format("woff2"),
       url("fonts/JUST_Sans_Medium.woff")  format("woff"); }
@font-face { font-family: "JUST Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_SemiBold.woff2") format("woff2"),
       url("fonts/JUST_Sans_SemiBold.woff")  format("woff"); }
@font-face { font-family: "JUST Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_Bold.woff2") format("woff2"),
       url("fonts/JUST_Sans_Bold.woff")  format("woff"); }
@font-face { font-family: "JUST Sans"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("fonts/JUST_Sans_ExBold.woff2") format("woff2"),
       url("fonts/JUST_Sans_ExBold.woff")  format("woff"); }

/* Note: `--font-mono` also points at JUST Sans (per user direction) —
 * numerics use `font-variant-numeric: tabular-nums` for column alignment.
 * To restore Geist Mono, re-import from Google Fonts here and revert
 * `--font-mono` in the `:root` block below.
 */

/* Note: Headings previously used Grift (proprietary serif) with Fraunces
 * as a Google-Fonts substitute. Per user direction, the heading stack is
 * now JUST Sans (same face as body, tighter tracking) — sans-serif
 * throughout. To restore the serif system, revert `--font-heading` to
 * `"Fraunces", "Grift", Georgia, serif` and re-import Fraunces above.
 */

:root {
  /* ===== Neutral (mono) — warm stone ===== */
  --color-mono-50:  #f6f5f2;
  --color-mono-100: #efede8;
  --color-mono-200: #e3e0d8;
  --color-mono-300: #d2cec4;
  --color-mono-400: #b2ab9e;
  --color-mono-500: #8c8477;
  --color-mono-600: #655f57;
  --color-mono-700: #47423d;
  --color-mono-800: #2d2a27;
  --color-mono-900: #1f1d1b;
  --color-mono-950: #171614;

  /* ===== Primary — steel blue ===== */
  --color-primary-50:  #edf3f8;
  --color-primary-100: #dde7f1;
  --color-primary-200: #c3d3e4;
  --color-primary-300: #9eb7d2;
  --color-primary-400: #7899bc;
  --color-primary-500: #567b9e;
  --color-primary-600: #44647f;
  --color-primary-700: #355066;
  --color-primary-800: #273d4d;
  --color-primary-900: #1d2f3c;

  /* ===== Secondary — terracotta ===== */
  --color-secondary-50:  #faf1ea;
  --color-secondary-100: #f4e2d3;
  --color-secondary-200: #e9c3a6;
  --color-secondary-300: #d99d78;
  --color-secondary-400: #c57d55;
  --color-secondary-500: #b36541;
  --color-secondary-600: #925137;
  --color-secondary-700: #73402d;
  --color-secondary-800: #593124;
  --color-secondary-900: #45261d;

  /* ===== Semantic ===== */
  --color-success-50:  #edf8f2;
  --color-success-400: #50a77c;
  --color-success-600: #2c6b4f;
  --color-warning-50:  #fff6e8;
  --color-warning-400: #d9a24f;
  --color-warning-600: #956b2c;
  --color-danger-50:   #fceeee;
  --color-danger-400:  #d97d7d;
  --color-danger-600:  #a34848;
  --color-info-50:     #eef4fa;
  --color-info-400:    #72a1cd;
  --color-info-600:    #40698f;
  --color-field-touched: oklch(0.95 0.03 155);

  /* ===== Foundation aliases ===== */
  --color-app:              var(--color-mono-100);
  --color-canvas:           #fcfbf8;
  --color-surface:          #ffffff;
  --color-surface-muted:    #f4f1eb;
  --color-surface-elevated: #fffdf9;
  --color-surface-selected: var(--color-primary-50);
  --color-border-subtle:    #ddd7cc;
  --color-border-strong:    #c6bdaa;
  --color-text-primary:     var(--color-mono-900);
  --color-text-secondary:   var(--color-mono-700);
  --color-text-tertiary:    var(--color-mono-500);
  --color-text-inverse:     #fcfbf8;
  --color-action-primary:       var(--color-primary-700);
  --color-action-primary-hover: var(--color-primary-800);
  --color-action-secondary:     var(--color-surface-muted);
  --color-action-ghost:         transparent;
  --color-focus-ring: rgba(86, 123, 158, 0.34);

  /* ===== Type — base tokens ===== */
  --font-heading: "JUST Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "JUST Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Was Geist Mono; per user direction, numerics/IDs use JUST Sans with
   * tabular-nums for column alignment. Restore Geist Mono by reverting
   * to: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; */
  --font-mono:    "JUST Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ===== Spacing / density ===== */
  --spacing-shell-x: clamp(1rem, 1.4vw, 1.75rem);
  --spacing-shell-y: clamp(1rem, 1.2vw, 1.5rem);
  --spacing-section: 1.25rem;
  --spacing-stack:   0.875rem;

  /* ===== Radii ===== */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* ===== Borders + shadows ===== */
  --border-width-soft: 1px;
  --shadow-card:    0 1px 2px rgba(23, 22, 20, 0.05), 0 10px 24px rgba(23, 22, 20, 0.04);
  --shadow-overlay: 0 18px 40px rgba(23, 22, 20, 0.12);
  --shadow-sm:      0 1px 2px rgba(23, 22, 20, 0.05);

  /* ===== Shell layout ===== */
  --sidebar-width-expanded:  240px;
  --sidebar-width-collapsed: 72px;
  --sidebar-transition:      200ms cubic-bezier(0.2, 0, 0, 1);
  --mobile-nav-width:        320px;
  --mobile-nav-bar-height:   56px;

  /* ===== Motion easings (from src/lib/motion.ts) =====
   * All app motion is short (150–200ms) and uses an ease-out cubic-bezier.
   */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-shell:    cubic-bezier(0.22, 0, 0, 1);
  --duration-micro:    150ms;
  --duration-standard: 200ms;
  --duration-shell:    180ms;
}

/* --- Semantic type scale -------------------------------------------------- *
 * MtgOS pairs a serif display face with a humanist sans for body.
 * Headings are tight-leading and set in the serif; UI copy + labels are JUST Sans.
 * Sizes reflect the live app (PageHeader h1 is 30/36px, Inputs are 14px, etc.)
 */

body,
.t-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
}

h1, .t-h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(30px, 2.4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-mono-950);
}
h2, .t-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--color-mono-950);
}
h3, .t-h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-mono-900);
}
h4, .t-h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-mono-900);
}

/* Eyebrow — uppercase primary tag above PageHeader titles and card sections */
.t-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-primary-600);
}

/* Section label — used over tightly-spaced stat clusters */
.t-section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-mono-500);
}

.t-body-md  { font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); }
.t-body-sm  { font-size: 14px; line-height: 1.55; color: var(--color-text-secondary); }
.t-caption  { font-size: 13px; line-height: 1.5; color: var(--color-text-tertiary); }
.t-micro    { font-size: 12px; line-height: 1.4; color: var(--color-text-tertiary); }

.t-label    { font-size: 14px; font-weight: 500; color: var(--color-mono-700); }
.t-input    { font-size: 14px; color: var(--color-mono-900); }

/* Numeric / code — JUST Sans with tabular numerics for alignment. */
.t-code, code, kbd {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.t-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}