/* ==========================================================================
   Raddad - design tokens.

   ONE SOURCE OF TRUTH.
   The approved dashboard defines the material system in dashboard.css as
   --d-* custom properties on `.raddad-dashboard`. Every authenticated page,
   plus login and the error pages, carries that wrapper and loads that
   stylesheet, so those variables are already in scope here.

   This file therefore ALIASES them rather than repeating their values. An
   earlier revision copied the numbers instead, and that is exactly how the
   pages drifted into looking like different themes: two sets of values, and
   only one of them the approved one. Aliasing means dashboard.css remains the
   single definition, and nothing here can disagree with it.

   The only literal values below are for surfaces the dashboard never had -
   form controls - written in the same blue family so they read as part of the
   same material system.

   Scope: `.rd-ui`, carried by authenticated pages (with .rd-app) and by login
   and error pages (with .rd-auth). The dashboard carries neither, so nothing
   here can reach it.
   ========================================================================== */

.rd-ui {
  /* ---- Canvas (aliased) ---- */
  --rd-bg: var(--d-bg);
  --rd-bg-navy: var(--d-bg-navy);
  --rd-bg-mid: #0C132A;

  /* ---- Glass, three weights (aliased) ----
       --rd-glass         LEVEL 1  large page sections, numbered form steps
       --rd-glass-raised  LEVEL 2  compact status cards, the top bar
       --rd-nested        LEVEL 3  rows and option cards inside a panel

     A nested surface must sit ON a level-1 panel. Dropped straight onto the
     canvas it composites *darker*, not lighter, because it is the more
     transparent of the two - which is how flat black-looking rows happen. */
  --rd-glass: var(--d-glass);
  --rd-glass-raised: var(--d-glass-raised);
  --rd-panel: var(--d-panel);
  --rd-panel-2: var(--d-panel-2);
  --rd-nested: var(--d-nested);
  --rd-nested-border: var(--d-nested-border);
  --rd-fill: var(--d-fill);
  --rd-fill-hover: var(--d-fill-hover);

  --rd-border: var(--d-border);
  --rd-border-soft: var(--d-border-soft);
  --rd-hairline: var(--d-hairline);
  --rd-inner-top: var(--d-inner-top);
  --rd-inner-bloom: var(--d-inner-bloom);
  --rd-inner-base: var(--d-inner-base);
  --rd-blur: var(--d-blur);
  --rd-shadow: var(--d-shadow);
  --rd-shadow-soft: var(--d-shadow-soft);

  /* The composite the approved cards use, as one token, so no page has to
     restate four shadows and get one of them subtly wrong. */
  --rd-glass-shadow:
    var(--d-shadow-soft),
    inset 1px 1px 0 var(--d-inner-top),
    var(--d-inner-bloom),
    var(--d-inner-base);

  /* ---- Text (aliased) ---- */
  --rd-text: var(--d-text);
  --rd-text-2: var(--d-text-2);
  --rd-muted: var(--d-muted);
  --rd-dim: var(--d-dim);

  /* ---- Accents (aliased) ---- */
  --rd-blue: var(--d-blue);
  --rd-cyan: var(--d-cyan);
  --rd-violet: var(--d-violet);
  --rd-teal: var(--d-teal);
  --rd-green: var(--d-green);
  --rd-amber: var(--d-amber);
  --rd-red: var(--d-red);
  --rd-grad: var(--d-grad);
  --rd-ig-grad: var(--d-ig-grad);

  /* ---- Geometry (aliased) ---- */
  --rd-radius-xl: var(--d-radius-xl);
  --rd-radius-lg: var(--d-radius-lg);
  --rd-radius: var(--d-radius);
  --rd-radius-sm: var(--d-radius-sm);
  --rd-radius-xs: 12px;
  --rd-pad: var(--d-pad);
  --rd-gap: var(--d-gap);
  /* Vertical clearance the fixed mobile bottom rail needs. Any `.rd-ui`
     component that sizes itself off the viewport height (rather than
     relying on the page's own scroll, which `.shell`'s padding-bottom
     already reserves for) must subtract this too. */
  --rd-mobile-rail-reserve: var(--d-mobile-rail-reserve);

  /* ---- Form controls ----
     The one surface family the dashboard never needed. Navy glass, not black:
     a field has to read as a recess in the panel, not as a hole cut through it
     to the void. The previous value (rgba(12,26,50,.46)) composited to near
     black over this canvas, which is what made every form look like a
     different product. */
  --rd-input-bg: rgba(15, 29, 55, .68);
  --rd-input-border: rgba(170, 205, 255, .16);
  --rd-input-border-hover: rgba(180, 212, 255, .28);
  --rd-input-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  --rd-input-focus-border: rgba(75, 145, 255, .65);
  --rd-input-focus-shadow:
    0 0 0 3px rgba(61, 145, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  --rd-input-error-border: rgba(255, 82, 120, .6);
  --rd-input-placeholder: rgba(154, 170, 203, .55);
  --rd-input-radius: 13px;

  /* ---- Type scale ---- */
  --rd-fs-xs: 11.5px;
  --rd-fs-sm: 12.5px;
  --rd-fs: 13.5px;
  --rd-fs-md: 15px;
  --rd-fs-lg: 19px;
  --rd-fs-xl: 27px;

  color: var(--rd-text);
}