/* ============================================================
   PDS Design System — colors_and_type.css
   A modernized refresh for Personal Digital Spaces.
   Import this file into any HTML artifact in this project.
   ============================================================ */

/* ---------- Fonts (self-hosted preferred; falling back to Google Fonts CDN) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ===========================================================
     COLOR SYSTEM
     Refreshed palette: deep "signal ink" + warm canvas paper +
     one vivid signal accent (data-teal) and a grounding olive
     that nods to the "sustainable information economy" mission.
     =========================================================== */

  /* -- Brand accents -- */
  --pds-signal-50: #eafbf7;
  --pds-signal-100: #c8f3e8;
  --pds-signal-200: #8be6d1;
  --pds-signal-300: #4fd2b5;
  --pds-signal-400: #1fb796; /* hover */
  --pds-signal-500: #069e7f; /* primary brand accent — "Signal Teal" */
  --pds-signal-600: #007a64;
  --pds-signal-700: #00604f;
  --pds-signal-800: #064a3e;
  --pds-signal-900: #0b3a32;

  /* -- Ground / earthy olive — sustainability nod -- */
  --pds-ground-50: #f6f6ed;
  --pds-ground-100: #ebebd2;
  --pds-ground-200: #d6d6a8;
  --pds-ground-300: #b7b977;
  --pds-ground-400: #8b8f4f;
  --pds-ground-500: #5e6333; /* deep olive */
  --pds-ground-600: #474b27;
  --pds-ground-700: #33371c;

  /* -- Ink / neutrals (warm-cool balance) -- */
  --pds-ink-0: #ffffff;
  --pds-ink-50: #f8f7f3; /* canvas — warm paper */
  --pds-ink-100: #f1efe8;
  --pds-ink-150: #e8e6dd;
  --pds-ink-200: #d9d7cd;
  --pds-ink-300: #b9b7ad;
  --pds-ink-400: #8a8880;
  --pds-ink-500: #60605a;
  --pds-ink-600: #3f4039;
  --pds-ink-700: #272823;
  --pds-ink-800: #171814;
  --pds-ink-900: #0b0c08; /* "signal ink" — deepest text/surface */

  /* -- Semantic status -- */
  --pds-success: #069e7f;
  --pds-warning: #c48a1a;
  --pds-danger: #b93b2d;
  --pds-info: #2d6fb9;

  /* -- Status aliases (used by component code) -- */
  --pds-status-ok: var(--pds-success);
  --pds-status-warn: var(--pds-warning);
  --pds-status-error: var(--pds-danger);
  --pds-status-ok-bg: color-mix(in srgb, var(--pds-success) 8%, transparent);
  --pds-status-warn-bg: color-mix(in srgb, var(--pds-warning) 8%, transparent);
  --pds-status-error-bg: color-mix(in srgb, var(--pds-danger) 8%, transparent);

  /* -- Semantic aliases (light theme default) -- */
  --pds-bg: var(--pds-ink-50); /* page canvas */
  --pds-bg-elevated: var(--pds-ink-0); /* cards, popovers */
  --pds-bg-sunken: var(--pds-ink-100); /* insets */
  --pds-bg-inverse: var(--pds-ink-900); /* dark surfaces on light */

  --pds-fg: var(--pds-ink-900); /* primary text */
  --pds-fg-muted: var(--pds-ink-600); /* secondary text */
  --pds-fg-subtle: var(--pds-ink-500); /* tertiary / captions */
  --pds-fg-faint: var(--pds-ink-400); /* metadata / disabled */
  --pds-fg-on-dark: var(--pds-ink-50);
  --pds-fg-on-accent: #ffffff;

  --pds-border: var(--pds-ink-200);
  --pds-border-strong: var(--pds-ink-300);
  --pds-border-faint: var(--pds-ink-150);

  --pds-accent: var(--pds-signal-500);
  --pds-accent-hover: var(--pds-signal-600);
  --pds-accent-soft: var(--pds-signal-100);
  --pds-accent-fg: var(--pds-signal-700);

  /* ===========================================================
     SYNTAX TOKENS
     Mirror of shared/tokens/pds-tokens.css. Available for any future
     code-block highlighting surface in wp-admin (today previews are
     populated at runtime by JS — see apps/wp-plugin/templates/settings/
     rsl.php and api-webhooks.php). Update both blocks together.
     =========================================================== */
  --pds-syntax-fg: var(--pds-ink-900);
  --pds-syntax-comment: #6a7a4a; /* deep olive — sits with --pds-ground */
  --pds-syntax-keyword: #9b2620; /* deep red — readable on warm paper */
  --pds-syntax-string: #0a5d7a; /* deep teal */
  --pds-syntax-variable: #1a4f9e; /* deep blue */
  --pds-syntax-function: #5e3aa6; /* deep purple */
  --pds-syntax-type: #a25d00; /* deep amber */
  --pds-syntax-tag: #1a7a35; /* deep green */

  /* ===========================================================
     TYPOGRAPHY
     Geist (UI + body) · Newsreader (editorial headlines)
     JetBrains Mono (numerics, code, metadata)
     =========================================================== */

  --font-sans:
    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — fluid-ish, modular ~1.2 */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 40px;
  --fs-4xl: 56px;
  --fs-5xl: 76px;
  --fs-6xl: 104px;

  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.45;
  --lh-loose: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.12em;

  /* ===========================================================
     SPACING, RADII, SHADOWS
     =========================================================== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Shadows — soft, low-contrast, warm-cast. Avoid pure black. */
  --shadow-xs: 0 1px 1px rgba(20, 22, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(20, 22, 18, 0.05), 0 1px 3px rgba(20, 22, 18, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(20, 22, 18, 0.06), 0 2px 4px -2px rgba(20, 22, 18, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(20, 22, 18, 0.08), 0 4px 8px -4px rgba(20, 22, 18, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(20, 22, 18, 0.14), 0 8px 16px -8px rgba(20, 22, 18, 0.06);
  --shadow-inner: inset 0 1px 2px rgba(20, 22, 18, 0.05);
  --shadow-focus: 0 0 0 3px rgba(6, 158, 127, 0.28);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Grid motif used across product — lattice line weight & color */
  --pds-lattice: rgba(11, 12, 8, 0.06);
  --pds-lattice-strong: rgba(11, 12, 8, 0.1);
}

/* ==================== DARK THEME ==================== */
[data-theme='dark'] {
  --pds-bg: var(--pds-ink-900);
  --pds-bg-elevated: #15170f;
  --pds-bg-sunken: #0a0b06;
  --pds-bg-inverse: var(--pds-ink-50);

  --pds-fg: var(--pds-ink-50);
  --pds-fg-muted: var(--pds-ink-300);
  --pds-fg-subtle: var(--pds-ink-400);
  --pds-fg-faint: var(--pds-ink-500);
  --pds-fg-on-dark: var(--pds-ink-50);

  --pds-border: #2a2c22;
  --pds-border-strong: #3b3d30;
  --pds-border-faint: #1d1f16;

  --pds-accent: var(--pds-signal-400);
  --pds-accent-hover: var(--pds-signal-300);
  --pds-accent-soft: rgba(31, 183, 150, 0.14);
  --pds-accent-fg: var(--pds-signal-200);

  --pds-lattice: rgba(255, 255, 250, 0.06);
  --pds-lattice-strong: rgba(255, 255, 250, 0.1);
  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.45), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.55), 0 4px 8px -4px rgba(0, 0, 0, 0.4);

  /* Syntax — github-dark-dimmed palette, threaded through PDS tokens so
     prerendered code blocks read consistently with the rest of dark surface. */
  --pds-syntax-fg: #adbac7;
  --pds-syntax-comment: #768390;
  --pds-syntax-keyword: #f47067;
  --pds-syntax-string: #96d0ff;
  --pds-syntax-variable: #6cb6ff;
  --pds-syntax-function: #dcbdfb;
  --pds-syntax-type: #f69d50;
  --pds-syntax-tag: #8ddb8c;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Base styles assume these vars are in scope. Opt in by adding
   `class="pds-typography"` to a container, or scope globally.
   ============================================================ */
.pds-typography,
.pds-typography * {
  box-sizing: border-box;
}

.pds-typography {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--pds-fg);
  background: var(--pds-bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.pds-typography h1,
.pds-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--pds-fg);
  margin: 0;
}

.pds-typography h2,
.pds-headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--pds-fg);
  margin: 0;
}

.pds-typography h3,
.pds-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--pds-fg);
  margin: 0;
}

.pds-typography h4,
.pds-subtitle {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--pds-fg);
  margin: 0;
}

.pds-typography p,
.pds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--pds-fg-muted);
  margin: 0;
  text-wrap: pretty;
}

.pds-typography small,
.pds-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--pds-fg-subtle);
}

.pds-overline {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--pds-fg-subtle);
}

.pds-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.pds-typography code,
.pds-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--pds-bg-sunken);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--pds-fg);
  border: 1px solid var(--pds-border-faint);
}

.pds-typography a {
  color: var(--pds-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.pds-typography a:hover {
  color: var(--pds-accent-hover);
}

/* Editorial italic on serif — a signature accent */
.pds-typography em,
.pds-editorial-italic {
  font-family: var(--font-serif);
  font-style: italic;
}

/* Lattice grid — signature background motif */
.pds-lattice-bg {
  background-image:
    linear-gradient(to right, var(--pds-lattice) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pds-lattice) 1px, transparent 1px);
  background-size: 32px 32px;
}