/*
Theme Name: Plot Device Tech
Theme URI: https://plotdevicetechnologies.com
Author: Plot Device Technologies
Author URI: https://plotdevicetechnologies.com
Description: Studio site for Plot Device Technologies, built directly on the Plot Device Technologies Design System — green foundation, berry rose highlight, per-app accents, Space Grotesk / Inter / JetBrains Mono.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: plotdevice
Tags: custom-menu, custom-logo, one-column, wide-blocks, accessibility-ready
*/

/* ==========================================================================
   1. Tokens — copied verbatim from the design system (tokens/*.css)
   ========================================================================== */

:root {
  /* ---- Base neutrals (green-tinted, not pure gray) ---- */
  --ink:        #14231A;
  --muted:      #5A6B61;
  --line:       #DCE5DF;
  --surface:    #EDF4EF;
  --paper:      #FBFCFB;
  --white:      #FFFFFF;

  /* ---- Studio: green (primary, ~10% of any screen) ---- */
  --green:      #2C7A51;
  --green-deep: #1E5638;
  --green-soft: #E4F0E8;

  /* ---- Studio highlight: berry rose ---- */
  --rose:       #D65C7F;
  --rose-deep:  #B23E62;
  --rose-soft:  #FBE7EE;

  /* ---- App accent · Crits & Counters: amber ---- */
  --dice:       #E0A63C;
  --dice-deep:  #B87F1E;
  --dice-soft:  #FBF0DA;

  /* ---- App accent · Stoneroad: slate ----
     Token names stay --tak* because they are copied verbatim from the design
     system's tokens/colors.css. Rename them there first, then here. ---- */
  --tak:        #3E5C76;
  --tak-deep:   #2A4356;
  --tak-soft:   #E7EDF2;

  /* ---- Semantic aliases ---- */
  --text-body:              var(--ink);
  --text-muted:             var(--muted);
  --text-on-accent:         var(--white);
  --surface-page:           var(--paper);
  --surface-card:           var(--white);
  --surface-subtle:         var(--surface);
  --border-default:         var(--line);
  --accent-primary:         var(--green);
  --accent-primary-hover:   var(--green-deep);
  --accent-primary-soft:    var(--green-soft);
  --accent-highlight:       var(--rose);
  --accent-highlight-hover: var(--rose-deep);
  --accent-highlight-soft:  var(--rose-soft);
  --accent-dice:            var(--dice);
  --accent-dice-hover:      var(--dice-deep);
  --accent-dice-soft:       var(--dice-soft);
  --accent-tak:             var(--tak);
  --accent-tak-hover:       var(--tak-deep);
  --accent-tak-soft:        var(--tak-soft);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   13.5px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   19px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  40px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;

  /* ---- Spacing (4px rhythm) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-btn:  8px;
  --radius-chip: 6px;
  --radius-card: 12px;

  --shadow-card: 0 1px 2px rgba(20, 35, 26, 0.06), 0 1px 1px rgba(20, 35, 26, 0.04);
  --shadow-pop:  0 8px 24px rgba(20, 35, 26, 0.12);

  /* ---- Layout ---- */
  --wrap: 960px;
  --gutter: 24px;

  /* ---- Themed roles (the only things the dark block overrides) ---- */
  --header-bg: var(--surface-card);
  --footer-bg: var(--surface-card);
  --strip-bg:  var(--accent-primary-soft);

  --btn-primary-bg:       var(--accent-primary);
  --btn-primary-bg-hover: var(--accent-primary-hover);
  --btn-primary-fg:       #fff;
  --btn-ghost-fg:         var(--accent-primary-hover);
  --btn-ghost-bg-hover:   var(--accent-primary-soft);
  --btn-highlight-bg:     var(--rose-deep);
  --btn-highlight-bg-hover: #93304F;
  --btn-highlight-fg:     #fff;

  --tag-green-bg:   var(--accent-primary-soft);
  --tag-green-fg:   var(--green-deep);
  --tag-dice-bg:    var(--accent-dice-soft);
  --tag-dice-fg:    var(--ink);
  --tag-stoneroad-bg:     var(--accent-tak-soft);
  --tag-stoneroad-fg:     var(--tak-deep);
  --tag-neutral-bg: var(--surface-subtle);
  --tag-neutral-fg: var(--text-muted);

  --app-dice-head-bg: var(--accent-dice-soft);
  --app-stoneroad-head-bg:  var(--accent-tak-soft);
  --app-dice-rule:    var(--accent-dice);
  --app-stoneroad-rule:     var(--accent-tak);

  --link-fg:       var(--accent-primary-hover);
  --link-fg-hover: var(--green-deep);
}

/* ==========================================================================
   1b. Dark theme
   --------------------------------------------------------------------------
   The design system ships a light palette only. These are new dark tokens
   built on the same green-tinted foundation: the ground is a deep green-black
   rather than neutral black, the accents are lifted so they still carry on a
   dark ground, and every text/background pair here clears WCAG AA (the
   lightest is 6.7:1). Worth pushing back into the design system as a proper
   dark set.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Ground and text */
    --text-body:      #E6EFE9;
    --text-muted:     #9DB0A5;
    --surface-page:   #101A14;
    --surface-card:   #17241D;
    --surface-subtle: #1B2A22;
    --border-default: #2A3B31;

    /* Lifted accents */
    --accent-primary:         #5FBF8A;
    --accent-primary-hover:   #7FCFA0;
    --accent-primary-soft:    #17301F;
    --accent-highlight:       #E8829E;
    --accent-highlight-hover: #F09FB5;
    --accent-highlight-soft:  #33202A;

    --header-bg: #17241D;
    --footer-bg: #17241D;
    --strip-bg:  #17301F;

    --btn-primary-bg:       #4FAE7B;
    --btn-primary-bg-hover: #6BC894;
    --btn-primary-fg:       #0E1712;
    --btn-ghost-fg:         #7FCFA0;
    --btn-ghost-bg-hover:   #17301F;
    --btn-highlight-bg:       #E8829E;
    --btn-highlight-bg-hover: #F09FB5;
    --btn-highlight-fg:       #23111A;

    --tag-green-bg:   #17301F;
    --tag-green-fg:   #7FCFA0;
    --tag-dice-bg:    #2E2417;
    --tag-dice-fg:    #EFC271;
    --tag-stoneroad-bg:     #1B2733;
    --tag-stoneroad-fg:     #9FC4E2;
    --tag-neutral-bg: #1B2A22;
    --tag-neutral-fg: #9DB0A5;

    --app-dice-head-bg: #2E2417;
    --app-stoneroad-head-bg:  #1B2733;
    --app-dice-rule:    #E0A63C;
    --app-stoneroad-rule:     #7FA3C4;

    --link-fg:       #7FCFA0;
    --link-fg-hover: #A5DFBD;

    /* Borders carry separation on dark; drop the light-mode lift. */
    --shadow-card: none;
    --shadow-pop:  0 8px 24px rgba(0, 0, 0, 0.45);
  }

  /* The marks are drawn for a light ground — lift them off the dark. The
     Stoneroad icon is solid slate with no light fill, so it needs much more
     than the others or it sits invisible on the slate header. */
  .pd-brand img {
    filter: brightness(1.05);
  }
  .pd-app--dice .pd-app__head img,
  .pd-apphero--dice .pd-apphero__inner img {
    filter: brightness(1.05);
  }
  .pd-app--stoneroad .pd-app__head img,
  .pd-apphero--stoneroad .pd-apphero__inner img {
    filter: brightness(1.7) saturate(0.9);
  }
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--link-fg); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-fg-hover); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  color: var(--text-body);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-md); letter-spacing: var(--tracking-normal); }

p { margin: 0 0 var(--space-4); }

hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--space-12) 0; }

::selection { background: var(--accent-primary-soft); }

:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-chip);
}

.pd-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  z-index: 100;
  border-radius: 0 0 var(--radius-btn) 0;
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.pd-skip-link:focus { left: 0; color: #fff; }

.pd-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pd-wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ==========================================================================
   3. Primitives — Button, Tag, Badge, Card (ported from components/core)
   ========================================================================== */

.pd-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.pd-btn:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-fg); }

.pd-btn--ghost {
  background: transparent;
  color: var(--btn-ghost-fg);
  border-color: var(--border-default);
}
.pd-btn--ghost:hover { background: var(--btn-ghost-bg-hover); color: var(--btn-ghost-fg); }

/* In light mode highlight uses rose-deep, not rose: white-on-rose is 3.7:1
   and fails AA for body-sized text. rose-deep lands at 5.6:1. */
.pd-btn--highlight { background: var(--btn-highlight-bg); color: var(--btn-highlight-fg); }
.pd-btn--highlight:hover { background: var(--btn-highlight-bg-hover); color: var(--btn-highlight-fg); }

.pd-btn--sm { padding: 7px 14px; font-size: var(--text-xs); }
.pd-btn--lg { padding: 13px 22px; font-size: var(--text-md); }

.pd-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.4;
  padding: 5px 10px;
  border-radius: var(--radius-chip);
  background: var(--tag-green-bg);
  color: var(--tag-green-fg);
}
/* Light mode uses ink on the amber tint — dice-deep on dice-soft is 3.05:1
   and fails AA at chip sizes. */
.pd-tag--dice    { background: var(--tag-dice-bg);    color: var(--tag-dice-fg); }
.pd-tag--stoneroad     { background: var(--tag-stoneroad-bg);     color: var(--tag-stoneroad-fg); }
.pd-tag--neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); }

.pd-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  line-height: 1.4;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-subtle);
  color: var(--text-muted);
}
.pd-badge--green { background: var(--accent-primary-soft); color: var(--green-deep); }
.pd-badge--rose  { background: var(--accent-highlight-soft); color: var(--rose-deep); }

.pd-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}

.pd-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-4);
}

/* ==========================================================================
   4. Site header
   ========================================================================== */

.pd-header {
  border-bottom: 1px solid var(--border-default);
  background: var(--header-bg);
}

.pd-header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pd-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text-body);
}
.pd-brand img { width: 34px; height: 34px; }
.pd-brand__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.pd-nav { margin-left: auto; }
.pd-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
}
.pd-nav a {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: var(--weight-medium);
}
.pd-nav a:hover { color: var(--accent-primary-hover); }
.pd-nav .current-menu-item > a,
.pd-nav .current_page_item > a { color: var(--accent-primary-hover); }

/* ==========================================================================
   5. Hero
   ========================================================================== */

.pd-hero {
  text-align: center;
  padding: var(--space-16) 0 var(--space-8);
}
.pd-hero h1 {
  font-size: 48px;
  line-height: 1.08;
  margin: 0 0 var(--space-4);
}
.pd-hero__lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
}
.pd-hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-8);
}
.pd-hero__meta { margin-top: var(--space-6); }

/* ==========================================================================
   6. App cards
   ========================================================================== */

.pd-section { padding: var(--space-12) 0; }
.pd-section__head { margin-bottom: var(--space-8); }
.pd-section__head h2 { margin-bottom: var(--space-2); }
.pd-section__head p { color: var(--text-muted); margin: 0; }

.pd-apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.pd-app {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}
.pd-app:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }

.pd-app__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
}
.pd-app--dice .pd-app__head { background: var(--app-dice-head-bg); }
.pd-app--stoneroad  .pd-app__head { background: var(--app-stoneroad-head-bg); }
.pd-app__head img { width: 46px; height: 46px; flex: none; }

.pd-app__name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.pd-app__tagline { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; }

.pd-app__body { padding: var(--space-6); display: flex; flex-direction: column; flex: 1; }
.pd-app__body p { color: var(--text-muted); }
.pd-app__rule { height: 4px; border-radius: 2px; margin-bottom: var(--space-6); }
.pd-app--dice .pd-app__rule { background: var(--app-dice-rule); }
.pd-app--stoneroad  .pd-app__rule { background: var(--app-stoneroad-rule); }

.pd-app__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.pd-app__foot { margin-top: auto; }

/* ==========================================================================
   7. App page hero
   ========================================================================== */

.pd-apphero { border-bottom: 1px solid var(--border-default); padding: var(--space-12) 0; }
.pd-apphero--dice { background: var(--app-dice-head-bg); }
.pd-apphero--stoneroad  { background: var(--app-stoneroad-head-bg); }

.pd-apphero__inner { display: flex; align-items: center; gap: var(--space-6); }
.pd-apphero__inner img { width: 72px; height: 72px; flex: none; }
.pd-apphero h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-2); }
.pd-apphero p { font-size: var(--text-md); color: var(--text-muted); margin: 0 0 var(--space-4); }
.pd-apphero__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ==========================================================================
   8. Prose (WordPress editor content)
   ========================================================================== */

.pd-prose { max-width: 680px; }
.pd-prose h2 { font-size: var(--text-xl); margin-top: var(--space-12); }
.pd-prose h3 { font-size: var(--text-md); margin-top: var(--space-8); }
.pd-prose > *:first-child { margin-top: 0; }
.pd-prose ul, .pd-prose ol { padding-left: 1.25em; margin: 0 0 var(--space-4); }
.pd-prose li { margin-bottom: var(--space-2); }
.pd-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--surface-subtle);
  padding: 2px 6px;
  border-radius: var(--radius-chip);
}
.pd-prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--accent-primary-soft);
  color: var(--text-muted);
}
.pd-prose img { border-radius: var(--radius-card); }
.pd-prose table { border-collapse: collapse; width: 100%; }
.pd-prose th, .pd-prose td { border: 1px solid var(--border-default); padding: var(--space-2) var(--space-3); text-align: left; }

/* ==========================================================================
   9. Strip / callout
   ========================================================================== */

.pd-strip {
  background: var(--strip-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-8);
  text-align: center;
}
.pd-strip h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.pd-strip p { color: var(--text-muted); max-width: 560px; margin: 0 auto; }

/* ==========================================================================
   10. Footer
   ========================================================================== */

.pd-footer {
  border-top: 1px solid var(--border-default);
  background: var(--footer-bg);
}
.pd-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
  flex-wrap: wrap;
}
.pd-footer__brand { font-family: var(--font-mono); font-size: var(--text-xs); }

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 860px) {
  .pd-apps { grid-template-columns: 1fr; }
  .pd-hero { padding: var(--space-12) 0 var(--space-8); }
  .pd-hero h1 { font-size: 36px; }
}

@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .pd-header__inner { flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
  .pd-nav { margin-left: 0; width: 100%; }
  .pd-nav ul { gap: var(--space-6); flex-wrap: wrap; }
  .pd-hero h1 { font-size: 30px; }
  .pd-hero__lede { font-size: var(--text-md); }
  .pd-apphero__inner { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .pd-apphero h1 { font-size: var(--text-2xl); }
  .pd-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .pd-app:hover { transform: none; }
}