/* ===========================================================================
   RD8 — Color tokens
   ---------------------------------------------------------------------------
   RD8 ships a dark-first system. The canvas is near-black, surfaces are built
   from low-contrast charcoal gradients, and a single confident green carries
   every primary action and "pass" state. CAD highlight colors (magenta / cyan /
   yellow / purple) are reserved for 3D part identity inside the software.
   Values lifted verbatim from the production Webflow stylesheet.
   =========================================================================== */

:root {
  /* --- Brand green ------------------------------------------------------- */
  --rd8-green: #2b8837;             /* primary button fill (slightly muted)   */
  --rd8-green-bright: #39b54a;      /* accent / PASS / gradient stop          */
  --rd8-green-glow: #36eb08;        /* used only inside glow shadows          */
  --rd8-green-soft: #cef5ca;        /* success surface tint (light contexts)  */

  /* --- Neutral ramp (true brand values) --------------------------------- */
  --neutral-black: #080808;         /* page canvas                            */
  --neutral-darkest: #111111;       /* secondary surface / borders on black   */
  --neutral-darker: #222222;        /* card base, hairline borders            */
  --neutral-dark: #444444;          /* raised border, muted divider           */
  --neutral: #2a2a2a;               /* mid surface                            */
  --neutral-light: #aaaaaa;         /* secondary text on dark                 */
  --neutral-lighter: #e7e7e7;       /* primary text on dark                   */
  --neutral-lightest: #cccccc;      /* tertiary / disabled text               */
  --neutral-white: #ffffff;

  /* extra greys observed across surfaces */
  --surface-0b: #0b0b0b;
  --surface-0f: #0f0f0f;
  --surface-12: #121212;
  --surface-17: #171717;
  --surface-1c: #1c1c1c;
  --surface-21: #212121;
  --surface-28: #282828;
  --surface-37: #373737;

  /* --- Secondary brand hues (sparingly; mostly marketing accents) ------- */
  --brand-blue: #5067e9;
  --brand-blue-strong: #3851dd;
  --brand-blue-dark: #080331;
  --brand-pink: #dd23bb;
  --brand-pink-light: #ffaefe;
  --brand-pink-dark: #3c043b;

  /* --- System / status -------------------------------------------------- */
  --status-success: #39b54a;
  --status-success-soft: #cef5ca;
  --status-error: #e5484d;
  --status-error-strong: #c4271d;
  --status-error-soft: #f8e4e4;
  --status-error-dark: #3b0b0b;
  --status-warning: #d6b400;
  --status-warning-soft: #fcf8d8;
  --status-warning-dark: #5e5515;
  --status-focus: #2d62ff;

  /* --- CAD part-identity palette (3D viewer highlights) ----------------- */
  --cad-magenta: #e6188f;
  --cad-cyan: #19d3e6;
  --cad-yellow: #f2e200;
  --cad-green: #5fae5f;
  --cad-purple: #b146d6;
  --cad-orange: #c98a2b;
  --cad-grey: #9aa3ad;

  /* =========================================================================
     SEMANTIC ALIASES — author against these, not the raw values above.
     ========================================================================= */

  /* Surfaces (dark theme is the default RD8 surface) */
  --surface-canvas: var(--neutral-black);     /* the page                    */
  --surface-raised: var(--neutral-darkest);   /* panels sitting on canvas    */
  --surface-card: var(--neutral-darker);      /* card / tag base color       */
  --surface-overlay: rgba(8, 8, 8, 0.7);      /* scrims, modal backdrops     */

  /* Text */
  --text-primary: var(--neutral-lighter);     /* headlines / key copy        */
  --text-secondary: var(--neutral-light);     /* body copy                   */
  --text-tertiary: #7c7c7c;                   /* captions, meta              */
  --text-disabled: #555555;
  --text-inverse: var(--neutral-black);        /* on light / green surfaces   */
  --text-on-green: var(--neutral-white);

  /* Borders */
  --border-subtle: var(--neutral-darker);     /* 1px hairline on dark        */
  --border-strong: var(--neutral-dark);       /* raised / interactive edge   */
  --border-focus: var(--status-focus);

  /* Interactive */
  --action-primary: var(--rd8-green);
  --action-primary-hover: var(--rd8-green-bright);
  --action-accent: var(--rd8-green-bright);
  --link: var(--neutral-white);
  --link-muted: var(--neutral-light);
}