/* GENO design tokens — single source of truth
 *
 * This file is loaded BEFORE styles/base.css on every surface
 * (portal.html, admin.html). It is the only place where literal
 * hex values, radii, spacing, elevation, and motion constants
 * should live going forward.
 *
 * Naming convention: --<category>-<role>[-<state|step>]
 *
 * Values match the V3 Confident-Teal palette currently rendered
 * by styles/portal.css. Migrating callers: see the deprecation
 * alias block at the bottom of styles/base.css for the legacy
 * names that map onto these tokens.
 */

:root {
  /* ============================================================
   * Brand
   * ============================================================ */
  --color-brand:           #0097A5;
  --color-brand-strong:    #007684;
  --color-brand-soft:      #2CB3C0;
  --color-brand-bg:        #E6F4F7;
  --color-brand-shadow:    0 2px 14px rgba(0, 151, 165, 0.35);

  /* Accent (GENO gold) */
  --color-accent:          #FFD54F;
  --color-accent-strong:   #E6B800;
  --color-accent-bg:       #FFF8E1;
  --color-accent-yellow:   #FFDE59;

  /* Prorenata corporate (used on admin surface chrome) */
  --color-prn-navy:        #262262;
  --color-prn-red:         #A91F23;

  /* In-app navy (informational, distinct from corporate prn-navy) */
  --color-navy:            #003D73;
  --color-navy-strong:     #002B52;
  --color-navy-bg:         #EAF1F7;

  /* ============================================================
   * Surface
   * ============================================================ */
  --color-canvas:          #F4F7FA;
  --color-card:            #FFFFFF;
  --color-surface-sunken:  #fffef8;
  --color-black:           #0A0A0A;

  /* ============================================================
   * Ink (text)
   * ============================================================ */
  --color-ink:             #1A2B3C;
  --color-body:            #33475B;
  --color-mute:            #6B7C8D;
  --color-faint:           #9AAAB8;

  /* ============================================================
   * Lines
   * ============================================================ */
  --color-line:            #E2E9F0;
  --color-line-strong:     #CBD8E4;

  /* ============================================================
   * Status
   * ============================================================ */
  --color-success:         #2E8B4E;
  --color-success-bg:      #E4F3E8;
  --color-warning:         #C8860D;
  --color-warning-bg:      #FBEFD9;
  --color-danger:          #c0392b;
  --color-danger-bg:       #fdf2f2;

  /* ============================================================
   * Lane semantics (Studio + Inventory dual-mode)
   * ============================================================ */
  --color-lane-sm102:           var(--color-success);
  --color-lane-sm102-bg:        var(--color-success-bg);
  --color-lane-advanced:        #9E2A2B;
  --color-lane-advanced-strong: #7A1F20;
  --color-lane-advanced-bg:     #FAECEC;

  /* ============================================================
   * Typography
   * ============================================================ */
  --font-xs:       11px;
  --font-sm:       12.5px;
  --font-md:       13.5px;   /* default body copy */
  --font-lg:       16px;
  --font-xl:       20px;
  --font-2xl:      22px;
  --font-3xl:      28px;
  --font-display:  44px;

  --lh-tight:      1.25;
  --lh-normal:     1.55;
  --lh-loose:      1.7;

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

  /* ============================================================
   * Radii
   *
   * Canonical scale below. The legacy --r-s (9px) value is
   * preserved verbatim in the base.css deprecation block to
   * avoid a visual ripple across components that already use it.
   * ============================================================ */
  --radius-xs:    6px;     /* maps from legacy --r-input */
  --radius-sm:    8px;     /* maps from legacy --r-chip */
  --radius-md:    12px;    /* maps from legacy --r-card */
  --radius-lg:    14px;    /* maps from legacy --r       */
  --radius-pill:  999px;

  /* ============================================================
   * Spacing scale (4 px base)
   * ============================================================ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ============================================================
   * Elevation
   *
   * --elev-1..3 follow the V3 neutral-shadow stack used by
   * portal.css. The legacy teal-tinted shadows from base.css
   * are preserved as --elev-soft-teal* for the migration window.
   * ============================================================ */
  --elev-0:               none;
  --elev-1:               0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
  --elev-2:               0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
  --elev-3:               0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.05);
  --elev-soft-teal:       0 1px 3px rgba(0, 80, 96, 0.06), 0 6px 24px rgba(0, 80, 96, 0.08);
  --elev-soft-teal-light: 0 1px 2px rgba(0, 80, 96, 0.05);

  /* ============================================================
   * Motion
   * ============================================================ */
  --motion-fast:  120ms;
  --motion-base:  180ms;
  --motion-slow:  280ms;
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================================
   * Interaction
   *
   * One consistent focus ring + hover/press transforms across
   * the entire app. New components should reference these
   * tokens instead of redeclaring rgba() values inline.
   * ============================================================ */
  --focus-ring:               0 0 0 3px rgba(0, 151, 165, 0.30);
  --focus-ring-danger:        0 0 0 3px rgba(192, 57, 43, 0.25);
  --focus-ring-lane-advanced: 0 0 0 3px rgba(158, 42, 43, 0.22);
  --hover-lift:               translateY(-1px);
  --press-sink:               translateY(1px);
  --disabled-opacity:         0.55;
}