/* =============================================
   from9to10 — Design Tokens
   Colors, Type, Spacing, Shadows, Radii
   Built on top of NeoBrutalismCSS
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Lexend+Mega:wght@400;700;900&family=Geist:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&family=Karla:wght@400;500;700&display=swap');

:root {
  /* ----- CORE PALETTE (from NeoBrutalismCSS variables) ----- */
  --f9-black: #000000;
  --f9-white: #ffffff;

  --f9-blue: #0077b6;          /* primary brand — "from9" */
  --f9-blue-hover: #005785;
  --f9-red: #dc341e;           /* brand accent — "to10" brush */
  --f9-red-hover: #a52a2a;
  --f9-orange: #ff5733;
  --f9-orange-hover: #d64b2b;
  --f9-green: #40d39c;
  --f9-green-hover: #30ac7e;
  --f9-green-light: #92fca2;

  --f9-sky-blue: #b9e2f8;
  --f9-sky-blue-light: #d5f0ff;
  --f9-sky-bg: #F2F9FF;        /* app background */

  --f9-pale-red: #ffc5c8;
  --f9-pale-violet: #bc98cb;
  --f9-soft-blue: #4799ae;
  --f9-pale-cyan: #b9e7de;
  --f9-pale-yellow: #fdfd96;
  --f9-pale-yellow-light: #f8f894;

  /* ----- SEMANTIC FG / BG ----- */
  --fg1: #000000;              /* primary text */
  --fg2: #333333;              /* body text */
  --fg3: #666666;              /* secondary / labels */
  --fg4: #999999;              /* muted / placeholder */
  --border: #000000;
  --border-muted: #e0e0e0;
  --surface: #ffffff;
  --surface-muted: #f9f9f9;
  --surface-input-focus: #fffef0; /* cream tint on input focus */
  --app-bg: var(--f9-sky-bg);

  /* ----- STATUS / EDITORIAL ----- */
  --status-planned-bg: #e0e0e0;    --status-planned-fg: #333;
  --status-generated-bg: #cfe8ff;  --status-generated-fg: #003d80;
  --status-reviewed-bg: #fff3cd;   --status-reviewed-fg: #7a5c00;
  --status-approved-bg: #d4edda;   --status-approved-fg: #155724;
  --status-published-bg: #28a745;  --status-published-fg: #fff;
  --status-rejected-bg: #fde8e8;   --status-rejected-fg: #7a0000;

  --pill-gen-bg: #fff3e0;   --pill-gen-fg: #e65100;
  --pill-pub-bg: #e3f2fd;   --pill-pub-fg: #1565c0;

  /* ----- TYPE FAMILIES ----- */
  --font-display: "Lexend Mega", "Geist", Arial, sans-serif; /* bold headings, buttons */
  --font-body: "Geist", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* labels, logo, code */
  --font-karla: "Karla", sans-serif; /* editor inputs in persona/tag editors */

  /* ----- TYPE SCALE ----- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;

  /* ----- SPACING ----- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ----- BORDERS ----- */
  --bw-1: 2px;     /* light borders (inputs, table rows) */
  --bw-2: 2.5px;   /* buttons default */
  --bw-3: 3px;     /* cards, inputs @sm */
  --bw-3-5: 3.5px; /* cards/badges @md+ */

  /* ----- SHADOWS (hard offset, no blur) ----- */
  --sh-sm: 3px 3px 0 var(--f9-black);
  --sh-md: 4px 4px 0 var(--f9-black);
  --sh-lg: 5px 5px 0 var(--f9-black);
  --sh-xl: 8px 8px 0 var(--f9-black);
  --sh-soft: 4px 4px 0 rgba(0, 0, 0, 0.1); /* for login & calendar container */
  --sh-hover: 2px 2px 0 var(--f9-black);

  /* ----- RADII ----- */
  --r-0: 0;         /* default — brutalist, square */
  --r-2: 2px;       /* status indicators */
  --r-4: 4px;       /* inputs in portal overrides */
  --r-pill: 50px;   /* badges */
  --r-full: 9999px; /* avatars */

  /* ----- LAYOUT ----- */
  --sidebar-w: 260px;
  --sidebar-collapsed: 64px;
  --content-max: 1200px;

  /* ----- MOTION ----- */
  --ease-brutal: cubic-bezier(0.77, 0, 0.18, 1);
  --t-fast: 0.1s;
  --t-base: 0.15s;
  --t-slow: 0.3s;
}

/* =============================================
   BASE TYPE
   ============================================= */

html, body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--app-bg);
  font-size: 16px;
  line-height: 1.5;
}

/* Headings use Lexend Mega — uppercase, bold, brutalist */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--fg1);
  margin: 0 0 var(--sp-3);
  line-height: 1.2;
}

h1 { font-size: var(--fs-32); }
h2 { font-size: var(--fs-24); }
h3 { font-size: var(--fs-20); }
h4 { font-size: var(--fs-18); text-transform: uppercase; }
h5 { font-size: var(--fs-16); text-transform: uppercase; letter-spacing: 0.05em; }
h6 { font-size: var(--fs-14); text-transform: uppercase; letter-spacing: 0.05em; }

p { margin: 0 0 var(--sp-3); color: var(--fg2); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* The logo wordmark inside the portal uses IBM Plex Mono, bold */
.f9-logo-wordmark {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg1);
}

/* Section title — black bottom rule */
.f9-section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-28);
  padding-bottom: var(--sp-3);
  border-bottom: var(--bw-1) solid var(--f9-black);
  margin-bottom: var(--sp-6);
}

/* Uppercase micro label (used above values, in sidebars) */
.f9-label {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg3);
}

/* Mono label — persona/tag editor style */
.f9-label-mono {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg1);
}