/*
 * Pemarks — Public Page Brand Tokens
 *
 * Single source of truth for design tokens used across all Pemarks public-facing
 * HTML pages (ui/public/*.html).
 *
 * For the React app, the equivalent source is ui/src/theme/index.ts (MUI theme).
 * Keep values in sync manually when changing either file.
 *
 * Usage: link this file before your <style> block in every public page:
 *   <link rel="stylesheet" href="pemarks-brand.css">
 *
 * Then reference tokens as CSS custom properties, e.g.:
 *   color: var(--pm-blue);
 *   background: var(--pm-primary-dark);
 *   font-family: var(--pm-font);
 */

:root {
  /* ── Primary palette (slate tones) ─────────────────────────────────────── */
  --pm-primary:        #0f172a;   /* slate-900  — main brand, headings         */
  --pm-primary-mid:    #334155;   /* slate-700  — public page base surfaces    */
  --pm-primary-dark:   #1e293b;   /* slate-800  — dark backgrounds, nav        */
  --pm-dark-deep:      #0f172a;   /* slate-900  — deepest dark surfaces         */
  --pm-primary-light:  #475569;   /* slate-600  — lighter variant              */
  --pm-secondary:      #64748b;   /* slate-500  — secondary text, icons        */
  --pm-accent:         #94a3b8;   /* slate-400  — muted accents                */
  --pm-dark:           #1e293b;   /* alias for primary-dark                    */
  --pm-gray:           #64748b;   /* body / paragraph text                     */
  --pm-light:          #f8fafc;   /* off-white section backgrounds             */
  --pm-border:         #e2e8f0;   /* card and divider borders                  */
  --pm-bg-default:     #f5f7fb;   /* app default background                    */
  --pm-bg-paper:       #ffffff;   /* app paper background                      */
  --pm-page-bg:        var(--pm-bg-default); /* shared page background           */
  --pm-page-text:      var(--pm-primary-dark); /* shared page text color          */
  --pm-surface-bg:     var(--pm-bg-paper); /* elevated surface/card background  */
  --pm-surface-border: var(--pm-border); /* elevated surface/card border        */

  /* ── Brand blue — matches MUI palette.info in ui/src/theme/index.ts ─────── */
  --pm-blue:           #1976d2;   /* primary action blue — CTA buttons, links  */
  --pm-blue-dark:      #1565c0;   /* hover / pressed state                     */
  --pm-blue-light:     #42a5f5;   /* lighter tint for backgrounds              */

  /* ── Typography — matches MUI theme fontFamily in ui/src/theme/index.ts ── */
  --pm-font: 'Inter', 'Segoe UI', system-ui, -apple-system,
             BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  /* ── Spacing ───────────────────────────────────────────────────────────── */
  --pm-section-padding:    88px 24px;
  --pm-card-padding:       30px;
  --pm-card-gap:           28px;

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --pm-shadow-card:        0 4px 12px rgba(0,0,0,0.05);
  --pm-shadow-card-hover:  0 14px 32px rgba(0,0,0,0.10);
  --pm-shadow-dialog:      0 20px 60px rgba(0,0,0,0.55);
  --pm-shadow-hero-badge:  0 4px 14px rgba(0,0,0,0.25);

  /* ── Border radii ──────────────────────────────────────────────────────── */
  --pm-radius-card:        16px;
  --pm-radius-card-sm:     12px;
  --pm-radius-icon:        14px;
  --pm-radius-btn:         12px;
  --pm-radius-btn-sm:      8px;
  --pm-radius-badge:       999px;

  /* ── Typography weights ────────────────────────────────────────────────── */
  --pm-weight-hero:        800;
  --pm-weight-heading:     700;
  --pm-weight-label:       700;
  --pm-weight-btn:         600;

  /* ── Header ────────────────────────────────────────────────────────────── */
  --pm-header-bg:          rgba(15,23,42,0.97);   /* shared across all public pages + app */
  --pm-header-height:      56px;
  --pm-header-blur:        14px;
  --pm-header-border:      rgba(255,255,255,0.07);

  /* ── Header logo icon ──────────────────────────────────────────────────── */
  --pm-logo-icon-size:     22px;
  --pm-logo-icon-bg:       #ffffff;
  --pm-logo-icon-padding:  3px;
  --pm-logo-icon-shadow:   0 2px 8px rgba(0,0,0,0.15);

  /* ── Dark-section palette ──────────────────────────────────────────────── */
  --pm-dark-section-bg:    #1e293b;
  --pm-dark-card-bg:       rgba(255,255,255,0.07);
  --pm-dark-card-bg-feat:  rgba(255,255,255,0.11);
  --pm-dark-card-border:   rgba(255,255,255,0.12);
  --pm-dark-text:          rgba(255,255,255,0.72);
  --pm-dark-text-muted:    rgba(255,255,255,0.42);
}

/*
 * .pm-section-tag  — small uppercase pill label above section headings
 * Usage: <span class="pm-section-tag">WHY PEMARKS</span>
 */
.pm-section-tag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: var(--pm-radius-badge, 999px);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  background: rgba(148,163,184,0.15);
  color: #94a3b8;
}
.pm-section-tag--blue {
  background: rgba(25,118,210,0.12);
  color: #42a5f5;
}

/* Shared page shell background to match app shell (ui/src/styles/index.css) */
.pm-page-bg {
  background-color: var(--pm-page-bg, var(--pm-bg-default));
  color: var(--pm-page-text, var(--pm-primary-dark));
}

/* Shared elevated card/surface style for public pages */
.pm-surface {
  background: var(--pm-surface-bg, var(--pm-bg-paper));
  border: 1px solid var(--pm-surface-border, var(--pm-border));
  box-shadow: var(--pm-shadow-card, 0 4px 12px rgba(0,0,0,0.05));
}

/* .sh-logo-icon — Pemarks icon inside shared header logo link */
.sh-logo-icon {
  width: var(--pm-logo-icon-size, 22px);
  height: var(--pm-logo-icon-size, 22px);
  border-radius: 50%;
  margin-right: 0.45rem;
  flex-shrink: 0;
  background: var(--pm-logo-icon-bg, #fff);
  padding: var(--pm-logo-icon-padding, 3px);
  box-shadow: var(--pm-logo-icon-shadow, 0 2px 8px rgba(0,0,0,0.15));
}