/* ============================================================
   PubGen AI — Brand design tokens
   Import this file and reference the CSS custom properties below.
   Example:  <link rel="stylesheet" href="https://<your-site>/tokens.css">
             color: var(--pg-forest);
   ============================================================ */
:root {
  color-scheme: light dark;  /* enables native dark form controls / scrollbars */

  /* ---- Core palette ---- */
  /* CONTRAST RULE: never place Energy orange on Evergreen teal (1.5:1 — unreadable),
     on itself, or on any mid-tone background. Orange sits on Ivory/Paper (large text
     only, 3:1) or on Forest/dark. On Evergreen backgrounds, accents use Ivory/White. */
  --pg-forest:    #0A332B;  /* primary brand green */
  --pg-ink:       #0F1412;  /* near-black text */
  --pg-energy:    #FF5A00;  /* accent / CTA orange — see contrast rule above */
  --pg-evergreen: #21837A;  /* secondary teal */
  --pg-ivory:     #FDFDF5;  /* light surface / text on dark */
  --pg-paper:     #F2F1EA;  /* default page background */
  --pg-sand:      #D6CEB2;  /* warm neutral */
  --pg-walnut:    #4A3527;  /* deep warm brown */
  --pg-line:      #DFE1D6;  /* hairline / borders */

  /* ---- Accent tints & shades (dark UI / HUD, glows, hover states) ---- */
  --pg-energy-light:    #FF8340;  /* energy tint — hover / emphasis on dark */
  --pg-energy-dark:     #BF4400;  /* energy shade — gradients / pressed */
  --pg-evergreen-light: #29A499;  /* evergreen tint */
  --pg-evergreen-glow:  #3fd6c4;  /* bright teal glow — lines, accents on dark */
  --pg-forest-deep:     #04130f;  /* deepest forest-black — dark canvas */

  /* ---- Semantic roles (light) ---- */
  --pg-bg:            var(--pg-paper);
  --pg-surface:       var(--pg-ivory);
  --pg-surface-2:     #ffffff;
  --pg-text:          var(--pg-ink);
  --pg-text-muted:    #5b6660;
  --pg-text-invert:   var(--pg-ivory);
  --pg-primary:       var(--pg-forest);
  --pg-accent:        var(--pg-energy);
  --pg-secondary:     var(--pg-evergreen);
  --pg-border:        var(--pg-line);

  /* ---- Typefaces ---- */
  --pg-serif: Tiempos, "Times New Roman", Georgia, serif;       /* headlines, editorial */
  --pg-sans:  Inter, -apple-system, "Segoe UI", sans-serif;     /* body, UI */
  --pg-mono:  "JetBrains Mono", ui-monospace, Menlo, monospace; /* labels, kickers, code */

  /* ---- Weights ---- */
  --pg-weight-regular: 400;
  --pg-weight-medium:  500;
  --pg-weight-semibold:600;

  /* ---- Type scale (rem, 1rem = 16px) ---- */
  --pg-text-xs:   0.75rem;   /* 12 — mono kickers */
  --pg-text-sm:   0.875rem;  /* 14 */
  --pg-text-base: 1rem;      /* 16 — body */
  --pg-text-lg:   1.25rem;   /* 20 */
  --pg-text-xl:   1.5rem;    /* 24 */
  --pg-text-2xl:  2.125rem;  /* 34 — section heads */
  --pg-text-3xl:  3rem;      /* 48 */
  --pg-text-4xl:  4.5rem;    /* 72 — display */

  /* ---- Spacing scale ---- */
  --pg-space-1: 0.25rem;
  --pg-space-2: 0.5rem;
  --pg-space-3: 0.75rem;
  --pg-space-4: 1rem;
  --pg-space-6: 1.5rem;
  --pg-space-8: 2rem;
  --pg-space-12: 3rem;
  --pg-space-16: 4rem;

  /* ---- Radii ---- */
  --pg-radius-sm: 7px;
  --pg-radius-md: 12px;
  --pg-radius-lg: 22px;
  --pg-radius-pill: 999px;

  /* ---- Elevation ---- */
  --pg-shadow-card: 0 30px 60px rgba(10, 51, 43, 0.18);
  --pg-shadow-pop:  0 40px 80px rgba(10, 51, 43, 0.35);

  /* ---- Layout ---- */
  --pg-container-sm: 760px;
  --pg-container-md: 1040px;
  --pg-container-lg: 1280px;
  --pg-page-gutter: clamp(20px, 4vw, 48px);
  --pg-grid-gap: var(--pg-space-6);

  /* ---- Motion ---- */
  --pg-duration-fast: 120ms;
  --pg-duration-base: 180ms;
  --pg-duration-slow: 320ms;
  --pg-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pg-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Focus, status, and data visualization ---- */
  --pg-focus-ring: 0 0 0 3px rgba(255, 90, 0, 0.26);
  --pg-success: var(--pg-evergreen);
  --pg-warning: #9A8A3E;
  --pg-danger: #C2683F;
  --pg-chart-1: var(--pg-forest);
  --pg-chart-2: var(--pg-evergreen);
  --pg-chart-3: var(--pg-energy);
  --pg-chart-4: var(--pg-sand);
  --pg-chart-grid: rgba(10, 51, 43, 0.10);

  /* ---- Media ratios ---- */
  --pg-ratio-square: 1 / 1;
  --pg-ratio-portrait: 4 / 5;
  --pg-ratio-video: 16 / 9;

  /* ---- Social card themes (1080x1080) ---- */
  --pg-card-ivory-bg:     var(--pg-ivory);   --pg-card-ivory-fg:     var(--pg-forest);
  --pg-card-paper-bg:     var(--pg-paper);   --pg-card-paper-fg:     var(--pg-forest);
  --pg-card-forest-bg:    var(--pg-forest);  --pg-card-forest-fg:    var(--pg-ivory);
  --pg-card-energy-bg:    var(--pg-energy);  --pg-card-energy-fg:    #ffffff;
  --pg-card-evergreen-bg: var(--pg-evergreen);--pg-card-evergreen-fg:var(--pg-ivory);

  /* ---- Brand logos (hosted SVGs, public + CORS) — use as background-image ---- */
  --pg-logo-mark:             url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark.svg");        /* forest mark — light backgrounds */
  --pg-logo-mark-ivory:       url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark-ivory.svg");  /* mark — dark backgrounds */
  --pg-logo-mark-white:       url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark-white.svg");  /* monochrome white mark */
  --pg-logo-horizontal-dark:  url("https://pubgen-brand-system.vercel.app/logos/pubgen-horizontal-dark.svg");  /* full lockup — light backgrounds */
  --pg-logo-horizontal-light: url("https://pubgen-brand-system.vercel.app/logos/pubgen-horizontal-light.svg"); /* full lockup — dark backgrounds */

  /* ---- Brand logos (hosted PNGs) — for email, Office, and clients without SVG support ---- */
  --pg-logo-png-mark:             url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark.png");        /* 300x314 — forest mark, light bg */
  --pg-logo-png-mark-ivory:       url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark-ivory.png");  /* 300x314 — mark, dark bg */
  --pg-logo-png-mark-white:       url("https://pubgen-brand-system.vercel.app/logos/pubgen-logomark-white.png");  /* 300x314 — white mark */
  --pg-logo-png-horizontal-dark:  url("https://pubgen-brand-system.vercel.app/logos/pubgen-horizontal-dark.png");  /* 600x109 — full lockup, light bg */
  --pg-logo-png-horizontal-light: url("https://pubgen-brand-system.vercel.app/logos/pubgen-horizontal-light.png"); /* 600x109 — full lockup, dark bg */
}

/* ---- Logo helper classes (set width/height, then apply) ---- */
.pg-logo { display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain; }
.pg-logo--mark            { background-image: var(--pg-logo-mark);             aspect-ratio: 49.71 / 52.1; }
.pg-logo--mark-ivory      { background-image: var(--pg-logo-mark-ivory);       aspect-ratio: 49.71 / 52.1; }
.pg-logo--mark-white      { background-image: var(--pg-logo-mark-white);       aspect-ratio: 49.71 / 52.1; }
.pg-logo--horizontal      { background-image: var(--pg-logo-horizontal-dark);  aspect-ratio: 285.73 / 52.1; }
.pg-logo--horizontal-light{ background-image: var(--pg-logo-horizontal-light); aspect-ratio: 285.73 / 52.1; }

/* ---- Optional helper classes ---- */
.pg-kicker { font-family: var(--pg-mono); font-size: var(--pg-text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--pg-forest); }
.pg-display { font-family: var(--pg-serif); font-weight: var(--pg-weight-medium); line-height: 1.05; letter-spacing: -.01em; }
.pg-body { font-family: var(--pg-sans); font-size: var(--pg-text-base); line-height: 1.55; color: var(--pg-text); }
.pg-rule { width: 120px; height: 5px; background: var(--pg-energy); border: 0; }
.pg-btn { font-family: var(--pg-mono); font-size: var(--pg-text-xs); text-transform: uppercase; letter-spacing: .05em; padding: 11px 18px; border-radius: var(--pg-radius-sm); border: 1px solid var(--pg-forest); background: var(--pg-forest); color: var(--pg-ivory); cursor: pointer; }
.pg-btn--accent { background: var(--pg-energy); border-color: var(--pg-energy); color: #fff; }
.pg-container { width: min(100% - (var(--pg-page-gutter) * 2), var(--pg-container-md)); margin-inline: auto; }
.pg-stack { display: flex; flex-direction: column; gap: var(--pg-space-4); }
.pg-cluster { display: flex; flex-wrap: wrap; gap: var(--pg-space-3); align-items: center; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--pg-grid-gap); }
.pg-panel { background: var(--pg-surface); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-md); padding: var(--pg-space-6); box-shadow: var(--pg-shadow-card); }
.pg-field { font-family: var(--pg-sans); color: var(--pg-text); background: var(--pg-surface-2); border: 1px solid var(--pg-border); border-radius: var(--pg-radius-sm); padding: 10px 12px; }
.pg-field:focus { outline: none; border-color: var(--pg-accent); box-shadow: var(--pg-focus-ring); }
.pg-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pg-mono); font-size: 0.6875rem; line-height: 1; text-transform: uppercase; letter-spacing: .06em; color: var(--pg-primary); background: rgba(33, 131, 122, .12); border-radius: var(--pg-radius-pill); padding: 6px 9px; }
.pg-badge--accent { color: var(--pg-energy); background: rgba(255, 90, 0, .12); }

/* ============================================================
   Dark theme — remaps the SEMANTIC ROLE tokens only.
   The core palette (--pg-forest, --pg-ink, --pg-paper, …) stays constant;
   build UIs against the role tokens (--pg-bg, --pg-surface, --pg-text, …)
   and they adapt automatically.

   Activation:
     • Manual  — set  <html data-theme="dark">  (or "light" to force light)
     • Auto    — follows the OS when no data-theme is set
   ============================================================ */
:root[data-theme="dark"] {
  --pg-bg:          #07211B;  /* deep forest-black page background */
  --pg-surface:     #0C2D26;  /* cards / panels */
  --pg-surface-2:   #103A31;  /* raised surfaces */
  --pg-text:        #FDFDF5;  /* primary text (ivory) */
  --pg-text-muted:  #9DB0A9;  /* muted sage */
  --pg-text-invert: #07211B;  /* text on light/accent fills */
  --pg-primary:     #34A99B;  /* brightened evergreen — reads on dark */
  --pg-accent:      #FF6A1A;  /* slightly lifted energy orange */
  --pg-secondary:   #21837A;
  --pg-border:      #1E463D;  /* hairline on dark */
  --pg-line:        #1E463D;
  --pg-chart-grid:  rgba(253, 253, 245, 0.12);
  --pg-shadow-card: 0 24px 50px rgba(0, 0, 0, 0.50);
  --pg-shadow-pop:  0 40px 80px rgba(0, 0, 0, 0.65);
}

/* Auto dark — applies when the visitor's OS prefers dark and no explicit choice is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-bg:          #07211B;
    --pg-surface:     #0C2D26;
    --pg-surface-2:   #103A31;
    --pg-text:        #FDFDF5;
    --pg-text-muted:  #9DB0A9;
    --pg-text-invert: #07211B;
    --pg-primary:     #34A99B;
    --pg-accent:      #FF6A1A;
    --pg-secondary:   #21837A;
    --pg-border:      #1E463D;
    --pg-line:        #1E463D;
    --pg-chart-grid:  rgba(253, 253, 245, 0.12);
    --pg-shadow-card: 0 24px 50px rgba(0, 0, 0, 0.50);
    --pg-shadow-pop:  0 40px 80px rgba(0, 0, 0, 0.65);
  }
}