/*
 * Design tokens — single source of truth for colors, shadows, and radii.
 * All CSS files should use these variables instead of hardcoded values.
 * Interface-specific variables (--manager-accent, --agent-accent, etc.)
 * in their own theme files should reference these tokens.
 */

:root {

  /* ── Brand Orange ────────────────────────────────────────────────── */
  --amber:           #ffaa2d;   /* primary brand color                  */
  --amber-light:     #ffb84f;   /* lighter header / chip background     */
  --amber-medium:    #ff9b17;   /* secondary orange accent              */
  --amber-strong:    #ff8a00;   /* strong accent, hover states          */
  --amber-dark:      #eb7600;   /* darker orange                        */
  --amber-deep:      #c95b00;   /* deepest orange for links / active    */

  /* Amber transparent — for backgrounds, overlays, focus rings */
  --amber-a08:  rgba(255, 170, 45, 0.08);
  --amber-a12:  rgba(255, 170, 45, 0.12);
  --amber-a16:  rgba(255, 170, 45, 0.16);
  --amber-a18:  rgba(255, 170, 45, 0.18);
  --amber-a22:  rgba(255, 170, 45, 0.22);
  --amber-a25:  rgba(255, 170, 45, 0.25);
  --amber-a32:  rgba(255, 170, 45, 0.32);

  /* ── Accent Violet ───────────────────────────────────────────────── */
  --violet:          #7c83ff;
  --violet-light:    #eef0ff;
  --violet-soft:     #f5f6ff;
  --violet-strong:   #6269e8;
  --violet-deep:     #4650c7;
  --violet-a10:      rgba(124, 131, 255, 0.10);
  --violet-a14:      rgba(124, 131, 255, 0.14);
  --violet-a18:      rgba(124, 131, 255, 0.18);
  --violet-a24:      rgba(124, 131, 255, 0.24);
  --violet-a32:      rgba(124, 131, 255, 0.32);


  /* ── Text ────────────────────────────────────────────────────────── */
  --text-primary:    #25282f;   /* graphite matte black                 */
  --text-secondary:  #394150;   /* neutral dark gray                    */
  --text-navy:       #1f2a44;   /* cool dark navy — manager & agent     */
  --text-dark:       #191d24;   /* darkest neutral text                 */

  --text-muted:      #6f7785;   /* secondary text (public / client)     */
  --text-muted-navy: #7d8597;   /* secondary text (manager)             */
  --text-muted-warm: #7f8796;   /* secondary text (client portal)       */
  --text-muted-cool: #7a8296;   /* secondary text (agent catalog)       */
  --text-on-accent:  #ffffff;   /* text on bright brand surfaces        */
  --icon-primary:    #3b4353;   /* default icon graphite                */
  --icon-muted:      #7a8394;   /* subtle icon gray                     */
  --icon-accent:     #6269e8;   /* accent icon                          */
  --icon-accent-strong:#4650c7; /* hover / active accent icon           */


  /* ── Backgrounds ─────────────────────────────────────────────────── */
  --bg-white:        #ffffff;
  --bg-off-white:    #fefefd;
  --bg-cream:        #fff9f2;   /* warm cream — public pages            */
  --bg-warm:         #fff6ee;   /* slightly deeper cream                */
  --bg-light:        #f4f5f8;   /* neutral light page background        */
  --bg-surface:      #fff8f3;   /* gradient endpoint, cards             */
  --bg-soft:         #f5f7fb;   /* soft neutral utility surface         */


  /* ── Borders ─────────────────────────────────────────────────────── */
  --border-light:    #edf2f9;
  --border-blue:     #e3ebf6;
  --border-navy:     rgba(31, 42, 68, 0.08);
  --border-navy-md:  rgba(31, 42, 68, 0.12);
  --border-neutral:  rgba(30, 30, 46, 0.08);
  --border-warm:     rgba(212, 173, 129, 0.45);
  --border-amber:    rgba(255, 170, 45, 0.22);


  /* ── Shadows ─────────────────────────────────────────────────────── */
  --shadow-xs:  0 4px 12px rgba(31, 42, 68, 0.06);
  --shadow-sm:  0 8px 20px rgba(31, 42, 68, 0.08);
  --shadow-md:  0 18px 36px rgba(24, 40, 72, 0.12);
  --shadow-lg:  0 24px 48px rgba(17, 17, 17, 0.12);
  --shadow-amber-sm: 0 8px 20px rgba(255, 170, 45, 0.18);
  --shadow-amber-md: 0 18px 34px rgba(255, 170, 45, 0.28);
  --shadow-violet-sm: 0 10px 24px rgba(98, 105, 232, 0.18);
  --shadow-violet-md: 0 18px 36px rgba(98, 105, 232, 0.28);

  /* ── Brand Gradients ─────────────────────────────────────────────── */
  --gradient-brand-clean:
    radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 12%),
    radial-gradient(circle at 86% 18%, rgba(255, 190, 92, 0.34) 0%, rgba(255, 190, 92, 0) 26%),
    radial-gradient(circle at 62% 78%, rgba(124, 131, 255, 0.10) 0%, rgba(124, 131, 255, 0) 24%),
    linear-gradient(135deg, #ffb84f 0%, #ffaa2d 60%, #ffad34 100%);
  --gradient-amber-cta: linear-gradient(135deg, #ffb84f 0%, #ffaa2d 62%, #ff9b17 100%);
  --gradient-amber-cta-hover: linear-gradient(135deg, #ffb041 0%, #ff9f1b 62%, #ff8a00 100%);
  --gradient-amber-surface:
    radial-gradient(circle at 16% 18%, rgba(255, 170, 45, 0.14) 0%, rgba(255, 170, 45, 0) 18%),
    radial-gradient(circle at 84% 24%, rgba(124, 131, 255, 0.08) 0%, rgba(124, 131, 255, 0) 22%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 239, 0.96) 100%);
  --gradient-surface-cool: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 255, 0.96) 56%, rgba(241, 244, 255, 0.94) 100%);
  --gradient-surface-cool-soft: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 249, 255, 0.95) 100%);
  --gradient-violet-cta: linear-gradient(135deg, #7b74ff 0%, #5f56ea 100%);
  --gradient-violet-cta-hover: linear-gradient(135deg, #6c65f7 0%, #544adc 100%);


  /* ── Status ──────────────────────────────────────────────────────── */
  --color-success:      #0b7b44;
  --color-success-bg:   rgba(11, 123, 68, 0.10);
  --color-error:        #b4543d;
  --color-error-alt:    #e5564d;
  --color-error-bg:     rgba(180, 84, 61, 0.10);
  --color-info:         #5abce5;
  --color-info-bg:      rgba(90, 188, 229, 0.12);


  /* ── Radii ───────────────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-pill: 999px;

}

/* Lightbox: ensure hidden by default regardless of which CSS files are loaded */
#lightbox { display: none; }