/* ==========================================================================
   PortalTable — light-mode adaptation of the Stratum Design System.
   Loaded AFTER the Stratum CSS so these :root values win. We remap the
   ink + foreground + line scales to a calm neutral light palette; every
   Stratum component (Button, Card, Badge, MonoLabel …) reads these vars,
   so they all flip to light automatically. Chartreuse stays, rationed.
   ========================================================================== */

:root {
  /* ---- Surfaces: light neutral stack (lightest = white) -------------- */
  --ink-950: #F6F7F8;   /* page canvas (paper) */
  --ink-900: #FFFFFF;   /* primary card / nav surface */
  --ink-850: #FFFFFF;   /* in-panel surface */
  --ink-800: #F0F1F3;   /* inset / icon tile / secondary button */
  --ink-750: #E8EAED;   /* hover surface */
  --ink-700: #DFE2E6;   /* pressed / selected */
  --ink-600: #D2D6DC;   /* heavy divider */

  /* ---- Foreground: cool ink on light --------------------------------- */
  --fg-1: #14161A;      /* primary text */
  --fg-2: #545962;      /* body */
  --fg-3: #868C97;      /* tertiary / captions / mono labels */
  --fg-4: #AAB0BA;      /* quaternary / disabled / grid lines */
  --fg-inverse: #16180F;/* text on chartreuse — dark ink */

  /* ---- Lines: dark hairlines on light -------------------------------- */
  --line-1: rgba(16,18,22,0.045);
  --line-2: rgba(16,18,22,0.09);
  --line-3: rgba(16,18,22,0.15);
  --line-4: rgba(16,18,22,0.22);

  /* ---- Accent: chartreuse, kept (rationed) --------------------------- */
  --accent: #D7FF3A;
  --accent-hover: #E2FF63;
  --accent-press: #C3EC1B;
  --accent-soft: rgba(193,224,20,0.16);
  --accent-ink: #4B5A06;        /* readable chartreuse-family text on light */
  --accent-line: rgba(160,196,8,0.55);

  --teal: #0E9888;              /* darkened teal for links/marks on light */
  --teal-soft: rgba(14,152,136,0.10);

  /* ---- Semantic (slightly deepened for light) ------------------------ */
  --green: #15935E;   --green-soft: rgba(21,147,94,0.10);
  --amber: #B5790B;   --amber-soft: rgba(181,121,11,0.10);
  --red:   #C8443B;   --red-soft:   rgba(200,68,59,0.10);
  --blue:  #2D6FE0;   --blue-soft:  rgba(45,111,224,0.10);

  /* ---- Light shadows (premium, restrained) --------------------------- */
  --pd-shadow-xs: 0 1px 2px rgba(16,18,22,0.05);
  --pd-shadow-sm: 0 1px 2px rgba(16,18,22,0.05), 0 1px 1px rgba(16,18,22,0.04);
  --pd-shadow-md: 0 6px 20px -8px rgba(16,18,22,0.12), 0 2px 6px -2px rgba(16,18,22,0.06);
  --pd-shadow-lg: 0 32px 64px -24px rgba(16,18,22,0.22), 0 10px 28px -12px rgba(16,18,22,0.10);

  /* focus ring tuned for light */
  --focus-ring: 0 0 0 2px var(--ink-900), 0 0 0 4px var(--accent-line);

  --container: 1160px;
}

html, body {
  background: var(--ink-950);
  color: var(--fg-2);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--fg-inverse); }

a { border-bottom: none; }

/* Grid + mesh textures, re-tuned for a light canvas (very faint, cool) */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(16,18,22,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16,18,22,0.035) 1px, transparent 1px);
  background-size: 30px 30px;
}
.bg-mesh {
  background-image:
    radial-gradient(60% 50% at 8% 0%, rgba(193,224,20,0.10), transparent 64%),
    radial-gradient(46% 60% at 98% 8%, rgba(14,152,136,0.06), transparent 64%);
}

/* ==========================================================================
   Dark "ink" scope — restores Stratum's native dark tokens within a section,
   so DS components rendered inside go dark-correct and chartreuse pops.
   ========================================================================== */
.pd-ink {
  --ink-950: #07080A;  --ink-900: #0E1014;  --ink-850: #14171D;
  --ink-800: #181C24;  --ink-750: #1F242E;  --ink-700: #262C38;  --ink-600: #333A48;
  --fg-1: #F5F7FA;  --fg-2: #B5BCC9;  --fg-3: #7A8499;  --fg-4: #4A5366;
  --line-1: rgba(255,255,255,0.06); --line-2: rgba(255,255,255,0.10);
  --line-3: rgba(255,255,255,0.16); --line-4: rgba(255,255,255,0.24);
  --accent-ink: #D7FF3A;
  --teal: #5EEAD4;
  --green: #4ADE80; --amber: #FBBF24; --red: #F87171; --blue: #60A5FA;
  background: var(--ink-950);
  color: var(--fg-2);
}

/* ==========================================================================
   Page helpers
   ========================================================================== */
.pd-container { max-width: var(--container); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.pd-section { padding: 104px 0; }
.pd-section--tight { padding: 72px 0; }

.pd-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Scroll-reveal — gentle, respects reduced motion */
.pd-reveal { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
  .pd-reveal { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
}
.pd-reveal.pd-in { opacity: 1; transform: none; }

/* Link with chartreuse-ink underline on hover */
.pd-link {
  color: var(--fg-1); font-weight: 500; cursor: pointer;
  border-bottom: 1px solid var(--line-3);
  transition: border-color var(--dur-2) var(--ease-out);
}
.pd-link:hover { border-color: var(--accent-press); }

/* Thin top accent rule used on highlighted cards */
.pd-accent-rule { height: 2px; background: var(--accent); border-radius: 2px; }

input, button, textarea { font-family: inherit; }