/*
  workspace_tokens.css — Design token foundation for FreeOrigins public surfaces.

  Covers: Merripedia, ProConWiki, Kai Workspace, FreeOrigins Homepage.
  Does NOT replace workspace_shared.css (console-only).

  Color direction: Option A — warm white (#f7f7f5) + blue accent.
  Mode: Light only.

  Import first in every public surface:
    <link rel="stylesheet" href="/public/workspace_tokens.css">

  Naming convention:
    --fo-bg-*       backgrounds
    --fo-surface-*  elevated surfaces (cards, panels)
    --fo-border-*   borders and dividers
    --fo-text-*     text colors
    --fo-accent-*   primary blue accent
    --fo-success-*  green success
    --fo-danger-*   red danger / error
    --fo-warning-*  amber warning
    --fo-info-*     blue informational
    --fo-trust-*    trust/verified pill colors (Merripedia-specific but shared)
    --fo-space-*    spacing scale
    --fo-text-size-* type scale
    --fo-weight-*   font weights
    --fo-lh-*       line heights
    --fo-radius-*   border radii
    --fo-z-*        z-index layers
    --fo-font-*     font families
    --fo-duration-* animation durations
*/

:root {

  /* ── Backgrounds ─────────────────────────────────────────────────────── */
  --fo-bg:              #f7f7f5;   /* warm off-white — page background      */
  --fo-bg-subtle:       #f0efed;   /* section alternation, pulled-back areas */

  /* ── Surfaces (cards, panels, modals) ────────────────────────────────── */
  --fo-surface:         #ffffff;   /* primary card surface                  */
  --fo-surface-raised:  #ffffff;   /* elevated card (same — no gradient)    */
  --fo-surface-sunken:  #f4f3f1;   /* inset / input background              */

  /* ── Borders ─────────────────────────────────────────────────────────── */
  --fo-border:          #e5e4e0;   /* default border                        */
  --fo-border-strong:   #cccbc7;   /* hover / emphasis border               */
  --fo-border-subtle:   #eeede9;   /* very light dividers                   */

  /* ── Text ────────────────────────────────────────────────────────────── */
  --fo-text:            #1a1a18;   /* primary — headings, body              */
  --fo-text-2:          #3d3d38;   /* secondary — subheadings, labels       */
  --fo-text-3:          #6b6b62;   /* tertiary — captions, meta             */
  --fo-text-4:          #9a9a8e;   /* muted — placeholders, disabled        */
  --fo-text-inverse:    #ffffff;   /* text on dark/accent backgrounds       */

  /* ── Accent — Blue (#2563eb) ─────────────────────────────────────────── */
  --fo-accent:          #2563eb;   /* primary CTA, links, focus rings       */
  --fo-accent-hover:    #1d4ed8;   /* hover state                           */
  --fo-accent-active:   #1e40af;   /* pressed state                         */
  --fo-accent-soft:     #dbeafe;   /* pill/badge backgrounds, highlights    */
  --fo-accent-text:     #1d4ed8;   /* text on --fo-accent-soft              */
  --fo-accent-border:   #93c5fd;   /* border on accent-tinted containers    */

  /* ── Semantic — Success ──────────────────────────────────────────────── */
  --fo-success:         #1d9e75;
  --fo-success-soft:    #dcfce7;
  --fo-success-text:    #166534;

  /* ── Semantic — Danger ───────────────────────────────────────────────── */
  --fo-danger:          #e24b4a;
  --fo-danger-soft:     #fee2e2;
  --fo-danger-text:     #991b1b;

  /* ── Semantic — Warning ──────────────────────────────────────────────── */
  --fo-warning:         #ef9f27;
  --fo-warning-soft:    #fef3c7;
  --fo-warning-text:    #92400e;

  /* ── Semantic — Info ─────────────────────────────────────────────────── */
  --fo-info:            #378add;
  --fo-info-soft:       #dbeafe;
  --fo-info-text:       #1e3a5f;

  /* ── Trust / Verified (Merripedia) ───────────────────────────────────── */
  /* Matches accent palette — "Verified" pills use the blue family.         */
  --fo-trust-bg:        #dbeafe;
  --fo-trust-text:      #1d4ed8;
  --fo-trust-border:    #93c5fd;

  /* ── Typography — Families ───────────────────────────────────────────── */
  /* Existing page fonts preserved; tokens reference them by role.          */
  --fo-font-display:    'Cormorant Garamond', Georgia, serif;
  --fo-font-body:       'Outfit', system-ui, -apple-system, sans-serif;
  --fo-font-ui:         'DM Sans', 'Outfit', system-ui, sans-serif;
  --fo-font-mono:       'JetBrains Mono', 'Fira Code', 'Space Mono', Consolas, monospace;

  /* ── Typography — Size scale (major third × 1.25) ────────────────────── */
  --fo-text-xs:         0.75rem;   /* 12px — captions, labels               */
  --fo-text-sm:         0.875rem;  /* 14px — secondary body, meta           */
  --fo-text-base:       1rem;      /* 16px — primary body                   */
  --fo-text-md:         1.125rem;  /* 18px — large body, card headers       */
  --fo-text-lg:         1.25rem;   /* 20px — section subheadings            */
  --fo-text-xl:         1.5rem;    /* 24px — section headings               */
  --fo-text-2xl:        1.875rem;  /* 30px — page titles                    */
  --fo-text-3xl:        2.25rem;   /* 36px — hero subtitles                 */
  --fo-text-4xl:        3rem;      /* 48px — hero display                   */
  --fo-text-5xl:        3.75rem;   /* 60px — max display                    */

  /* ── Typography — Weights ────────────────────────────────────────────── */
  --fo-weight-regular:  400;
  --fo-weight-medium:   500;
  --fo-weight-semibold: 600;
  --fo-weight-bold:     700;

  /* ── Typography — Line heights ───────────────────────────────────────── */
  --fo-lh-tight:        1.25;   /* headings                                 */
  --fo-lh-snug:         1.375;  /* subheadings                              */
  --fo-lh-normal:       1.5;    /* compact body                             */
  --fo-lh-relaxed:      1.65;   /* primary body                             */
  --fo-lh-loose:        1.8;    /* long-form reading                        */

  /* ── Spacing scale (4px base) ────────────────────────────────────────── */
  --fo-space-1:         0.25rem;   /*  4px */
  --fo-space-2:         0.5rem;    /*  8px */
  --fo-space-3:         0.75rem;   /* 12px */
  --fo-space-4:         1rem;      /* 16px */
  --fo-space-5:         1.25rem;   /* 20px */
  --fo-space-6:         1.5rem;    /* 24px */
  --fo-space-8:         2rem;      /* 32px */
  --fo-space-10:        2.5rem;    /* 40px */
  --fo-space-12:        3rem;      /* 48px */
  --fo-space-16:        4rem;      /* 64px */
  --fo-space-20:        5rem;      /* 80px */
  --fo-space-24:        6rem;      /* 96px */
  --fo-space-32:        8rem;      /* 128px */

  /* ── Border radii ────────────────────────────────────────────────────── */
  --fo-radius-sm:       4px;    /* inputs, badges, small chips               */
  --fo-radius:          8px;    /* buttons, small cards                      */
  --fo-radius-md:       10px;   /* cards, panels                             */
  --fo-radius-lg:       14px;   /* modals, large cards                       */
  --fo-radius-xl:       20px;   /* hero cards, full-bleed surfaces           */
  --fo-radius-full:     9999px; /* pills, avatars, toggles                   */

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  --fo-shadow-sm:       0 1px 2px rgba(0,0,0,0.06);
  --fo-shadow:          0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --fo-shadow-md:       0 4px 12px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.05);
  --fo-shadow-lg:       0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.05);
  --fo-shadow-focus:    0 0 0 3px rgba(37,99,235,0.25); /* blue focus ring   */

  /* ── Z-index layers ──────────────────────────────────────────────────── */
  --fo-z-base:          0;
  --fo-z-raised:        10;
  --fo-z-dropdown:      100;
  --fo-z-sticky:        200;
  --fo-z-overlay:       300;
  --fo-z-modal:         400;
  --fo-z-toast:         500;

  /* ── Animation durations ─────────────────────────────────────────────── */
  --fo-duration-fast:   80ms;
  --fo-duration:        150ms;
  --fo-duration-slow:   250ms;
  --fo-ease:            cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout — max widths ─────────────────────────────────────────────── */
  --fo-max-prose:       680px;   /* reading column                          */
  --fo-max-content:     900px;   /* standard content column                 */
  --fo-max-wide:        1200px;  /* wide layout                             */
  --fo-max-full:        1440px;  /* full bleed cap                          */

  /* ── Nav height (used by sticky offset calculations) ────────────────── */
  --fo-nav-height:      56px;
}

/*
  ── Base resets applied alongside tokens ─────────────────────────────────
  Minimal — only what every surface needs. Surface-specific styles go in
  each surface's own <style> block or file.
*/
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--fo-bg);
  color: var(--fo-text);
  font-family: var(--fo-font-body);
  font-size: var(--fo-text-base);
  line-height: var(--fo-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img, video {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/*
  ── Shared utility classes used across all surfaces ───────────────────────
  Prefixed fo- to avoid collisions with surface-specific styles.
*/

/* Visually hidden (accessible) */
.fo-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring — applied to interactive elements */
.fo-focusable:focus-visible {
  outline: none;
  box-shadow: var(--fo-shadow-focus);
  border-radius: var(--fo-radius-sm);
}

/* Trust / verified pill */
.fo-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--fo-space-1);
  background: var(--fo-trust-bg);
  color: var(--fo-trust-text);
  border: 1px solid var(--fo-trust-border);
  font-size: var(--fo-text-xs);
  font-weight: var(--fo-weight-medium);
  padding: 2px var(--fo-space-2);
  border-radius: var(--fo-radius-full);
  white-space: nowrap;
}

/* Generic pill / badge */
.fo-pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--fo-text-xs);
  font-weight: var(--fo-weight-medium);
  padding: 2px var(--fo-space-2);
  border-radius: var(--fo-radius-full);
  white-space: nowrap;
}
.fo-pill-accent  { background: var(--fo-accent-soft);   color: var(--fo-accent-text); }
.fo-pill-success { background: var(--fo-success-soft);  color: var(--fo-success-text); }
.fo-pill-warning { background: var(--fo-warning-soft);  color: var(--fo-warning-text); }
.fo-pill-danger  { background: var(--fo-danger-soft);   color: var(--fo-danger-text); }

/* Card surface */
.fo-card {
  background: var(--fo-surface);
  border: 1px solid var(--fo-border);
  border-radius: var(--fo-radius-md);
  padding: var(--fo-space-6);
}

/* Primary button */
.fo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fo-space-2);
  font-family: var(--fo-font-ui);
  font-size: var(--fo-text-sm);
  font-weight: var(--fo-weight-medium);
  line-height: 1;
  padding: var(--fo-space-3) var(--fo-space-5);
  border-radius: var(--fo-radius);
  border: 1px solid transparent;
  transition: background var(--fo-duration) var(--fo-ease),
              border-color var(--fo-duration) var(--fo-ease),
              box-shadow var(--fo-duration) var(--fo-ease);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.fo-btn:focus-visible {
  outline: none;
  box-shadow: var(--fo-shadow-focus);
}

/* Primary — filled */
.fo-btn-primary {
  background: var(--fo-accent);
  color: var(--fo-text-inverse);
  border-color: var(--fo-accent);
}
.fo-btn-primary:hover {
  background: var(--fo-accent-hover);
  border-color: var(--fo-accent-hover);
}
.fo-btn-primary:active {
  background: var(--fo-accent-active);
  border-color: var(--fo-accent-active);
}

/* Secondary — outlined */
.fo-btn-secondary {
  background: transparent;
  color: var(--fo-text);
  border-color: var(--fo-border-strong);
}
.fo-btn-secondary:hover {
  background: var(--fo-surface-sunken);
  border-color: var(--fo-border-strong);
}

/* Ghost — text only */
.fo-btn-ghost {
  background: transparent;
  color: var(--fo-accent);
  border-color: transparent;
}
.fo-btn-ghost:hover {
  background: var(--fo-accent-soft);
}

/* Avatar / initials circle */
.fo-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fo-radius-full);
  background: var(--fo-accent-soft);
  color: var(--fo-accent-text);
  font-weight: var(--fo-weight-medium);
  flex-shrink: 0;
  overflow: hidden;
}
.fo-avatar-sm  { width: 32px;  height: 32px;  font-size: var(--fo-text-xs); }
.fo-avatar-md  { width: 44px;  height: 44px;  font-size: var(--fo-text-sm); }
.fo-avatar-lg  { width: 64px;  height: 64px;  font-size: var(--fo-text-md); }
.fo-avatar-xl  { width: 88px;  height: 88px;  font-size: var(--fo-text-xl); }
.fo-avatar img { width: 100%;  height: 100%;  object-fit: cover; }

/* Star rating display */
.fo-stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--fo-warning);
  font-size: var(--fo-text-sm);
}

/* Section max-width containers */
.fo-container {
  max-width: var(--fo-max-wide);
  margin: 0 auto;
  padding: 0 var(--fo-space-10);
}
.fo-container-narrow {
  max-width: var(--fo-max-content);
  margin: 0 auto;
  padding: 0 var(--fo-space-10);
}
@media (max-width: 640px) {
  .fo-container,
  .fo-container-narrow {
    padding: 0 var(--fo-space-5);
  }
}

/* Divider */
.fo-divider {
  height: 1px;
  background: var(--fo-border);
  border: none;
  margin: var(--fo-space-8) 0;
}