/* ═══════════════════════════════════════
   DASHBOARD.HYDISTRO.COM — SHARED DESIGN TOKENS
   v3 — Rebuilt to match the Subscription page design.
   Changes in this pass:
   (1) font: Poppins -> Figtree (400 / 500 / 600 only),
   (2) purple unified to the page's brand purple #6c4bff,
   (3) neutrals, red, borders, radius, type scale, button and
       shadow values aligned to the subscription page,
   (4) new purple/brand tokens added.
   Every existing --dash- token name is kept so no page breaks.
   Orange, blue, green, amber, pink, cyan and service-tile colors
   are unchanged.
═══════════════════════════════════════ */

:root {

  /* ── BRAND COLORS ── */
  --dash-orange:      #E8500A;
  --dash-orange-2:    #FF7A45;
  --dash-orange-rgb:  232,80,10;
  --dash-orange-glow: rgba(232,80,10,.1);

  --dash-blue:        #2563EB;
  --dash-blue-2:      #4F8CFF;
  --dash-blue-rgb:    37,99,235;

  --dash-cyan:      #a0eae8;
  --dash-cyan-rgb:  160,234,232;

  /* PURPLE — exact brand purple from the Subscription page */
  --dash-purple:      #6c4bff;
  --dash-purple-2:    #8f74ff;
  --dash-purple-rgb:  108,75,255;

  --dash-green:       #22c55e;
  --dash-green-2:     #34D399;
  --dash-green-rgb:   34,197,94;

  /* RED — page's danger red (Cancel subscription) */
  --dash-red:         #f0443d;
  --dash-red-rgb:     240,68,61;

  --dash-amber:       #FBBF24;
  --dash-amber-2:     #F59E0B;
  --dash-amber-rgb:   251,191,36;

  --dash-pink:        #FF3D77;
  --dash-pink-2:      #F472B6;
  --dash-pink-rgb:    255,61,119;

  --dash-pulse:       #4ADE80;

  /* ── NEW — BRAND ALIASES (purple is the action color on the
     subscription page: buttons, accent text, icons, art panel) ── */
  --dash-brand:         var(--dash-purple);
  --dash-brand-rgb:     var(--dash-purple-rgb);
  --dash-brand-soft:    #f4f2fe;   /* lavender info panels */
  --dash-brand-pill:    #f1eefe;   /* "Current plan" pill background */
  --dash-brand-art:     #6c4bff;   /* illustration panel background */
  --dash-purple-10:     rgba(108,75,255,.10);
  --dash-purple-15:     rgba(108,75,255,.15);
  --dash-purple-20:     rgba(108,75,255,.20);
  --dash-purple-25:     rgba(108,75,255,.25);

  /* ── ICON GRADIENTS ── */
  --dash-grad-orange: linear-gradient(135deg, var(--dash-orange), var(--dash-orange-2));
  --dash-grad-blue:   linear-gradient(135deg, var(--dash-blue), var(--dash-blue-2));
  --dash-grad-green:  linear-gradient(135deg, var(--dash-green), var(--dash-green-2));
  --dash-grad-purple: linear-gradient(135deg, var(--dash-purple), var(--dash-purple-2));
  --dash-grad-pink:   linear-gradient(135deg, var(--dash-pink), var(--dash-pink-2));

  /* ── GLOW WASHES ── */
  --dash-glow-orange: rgba(var(--dash-orange-rgb), .15);
  --dash-glow-blue:   rgba(var(--dash-blue-rgb), .15);
  --dash-glow-purple: rgba(var(--dash-purple-rgb), .15);
  --dash-glow-cyan:   rgba(var(--dash-cyan-rgb), .10);

  /* ── OVERLAY OPACITIES ── */
  --dash-navy-rgb: 15,27,45;
  --dash-navy-45:  rgba(15,27,45,.45);
  --dash-black-50: rgba(0,0,0,.5);

  /* ── NOTICE BORDERS + DARK-ON-PALE TEXT ── */
  --dash-amber-2-rgb: 245,158,11;
  --dash-amber-2-20:  rgba(245,158,11,.2);
  --dash-green-20:    rgba(34,197,94,.2);
  --dash-amber-text:  #92400E;
  --dash-green-text:  #166534;

  /* ── DESTRUCTIVE / WARNING SOLID BUTTONS ── */
  --dash-warning-solid:       #D97706;
  --dash-warning-solid-hover: #b45309;
  --dash-red-hover:           #d8332c;
  --dash-red-hover-pale:      #fdeceb;
  --dash-red-border:          #f1d9d8;   /* NEW — outlined danger button border */

  --dash-green-pale-2:  #DCFCE7;
  --dash-green-border:  #BBF7D0;
  --dash-orange-40:     rgba(232,80,10,.4);
  --dash-purple-pale-2: #f1eefe;
  --dash-black-20:      rgba(0,0,0,.2);
  --dash-black-35:      rgba(0,0,0,.35);
  --dash-blue-soft:     #a8d8f0;
  --dash-blue-soft-rgb: 168,216,240;
  --dash-blue-soft-30:  rgba(168,216,240,.3);

  /* ── OPACITY ADDITIONS ── */
  --dash-orange-12: rgba(232,80,10,.12);
  --dash-orange-22: rgba(232,80,10,.22);
  --dash-green-25:  rgba(34,197,94,.25);
  --dash-pink-28:   rgba(255,61,119,.28);
  --dash-blue-20:   rgba(37,99,235,.2);
  --dash-black-05:  rgba(0,0,0,.05);
  --dash-black-25:  rgba(0,0,0,.25);
  --dash-black-45:  rgba(0,0,0,.45);
  --dash-black-18:  rgba(0,0,0,.18);
  --dash-green-18:  rgba(34,197,94,.18);
  --dash-red-15:    rgba(240,68,61,.15);
  --dash-white-65:  rgba(255,255,255,.65);
  --dash-red-20:    rgba(240,68,61,.2);
  --dash-toggle-track: #e5e7eb;
  --dash-orange-15: rgba(232,80,10,.15);
  --dash-orange-20: rgba(232,80,10,.2);
  --dash-white-80:  rgba(255,255,255,.8);
  --dash-orange-05: rgba(232,80,10,.05);
  --dash-red-05:    rgba(240,68,61,.05);
  --dash-red-30:    rgba(240,68,61,.3);

  --dash-chart-blue: #a8d8f0;
  --dash-chart-grid: #ebebeb;
  --dash-black-08:   rgba(0,0,0,.08);
  --dash-black-12:   rgba(0,0,0,.12);
  --dash-orange-10:  rgba(232,80,10,.10);

  /* ── THIRD-PARTY SERVICE ICON TILES — kept as their own colors ── */
  --dash-svc-soundexchange-1: #1B3A5C;
  --dash-svc-soundexchange-2: #2D5F8A;
  --dash-svc-lyricfind-1:     #5B2C6F;
  --dash-svc-lyricfind-2:     #8E44AD;
  --dash-svc-radiopromo-1:    #0f4c75;
  --dash-svc-radiopromo-2:    #1b6ca8;
  --dash-svc-publishing-1:    #064e3b;
  --dash-svc-publishing-2:    #065f46;
  --dash-svc-tracklib-1:      #0B0B0B;
  --dash-svc-tracklib-2:      #2A2A2A;

  /* ── BLUE STATUS PAIR ── */
  --dash-blue-text: #1D4ED8;

  --dash-white:       #fff;
  --dash-white-rgb:   255,255,255;
  --dash-black-rgb:   0,0,0;

  /* ── OPACITY SCALES — orange/blue glows and tinted borders ── */
  --dash-orange-08: rgba(232,80,10,.08);
  --dash-orange-14: rgba(232,80,10,.14);
  --dash-orange-18: rgba(232,80,10,.18);
  --dash-orange-25: rgba(232,80,10,.25);
  --dash-orange-30: rgba(232,80,10,.3);
  --dash-blue-14: rgba(37,99,235,.14);
  --dash-blue-18: rgba(37,99,235,.18);
  --dash-blue-25: rgba(37,99,235,.25);

  /* ── GRADIENT TINTS ── */
  --dash-orange-tint-1: #FFF6EF;
  --dash-orange-tint-2: #FFDCC0;
  --dash-orange-wash:   #FFFAF6;
  --dash-blue-tint-1:   #EFF5FF;
  --dash-blue-tint-2:   #D6E4FF;

  /* ── DECORATIVE GRAYS ── */
  --dash-dash-line: #C9CDD6;
  --dash-icon-line: #B9C0CC;

  /* ── PALE / TINT VARIANTS ── */
  --dash-orange-pale:  #FFF3E6;
  --dash-green-pale:   #E8FBEF;
  --dash-red-pale:     #fff0ef;
  --dash-blue-pale:    #EDF3FF;
  --dash-purple-pale:  #f4f2fe;
  --dash-amber-pale:   #FEF3C7;
  --dash-warning-pale: #FFF6DC;

  /* ── FUNCTIONAL / PLAN COLORS ── */
  --dash-gray:      #6B7280;  --dash-gray-pale: #F3F4F6;
  --dash-sky:       #0288D1;  --dash-sky-pale:  #E3F6FF;

  /* ── FORECAST TREND SIGNAL ── */
  --dash-trend-up-fg:   var(--dash-green);  --dash-trend-up-bg:   #DCFCE7;
  --dash-trend-flat-fg: var(--dash-amber-2);--dash-trend-flat-bg: var(--dash-amber-pale);
  --dash-trend-down-fg: var(--dash-red);    --dash-trend-down-bg: #FEE2E2;
  --dash-trend-none-fg: #475569;            --dash-trend-none-bg: #E2E5EA;

  /* ── STATUS CHIP COLORS ── */
  --dash-status-pending-text: #92400E;
  --dash-status-pending-bg:   #FEF3C7;

  --dash-status-error-text: #991B1B;
  --dash-status-error-bg:   #FEE2E2;

  --dash-status-success-text: #166534;
  --dash-status-success-bg:   #DCFCE7;

  --dash-status-neutral-text: #475569;
  --dash-status-neutral-bg:   #ECEEF2;

  /* ── RED TEXT/PALE PAIR ── */
  --dash-red-text:    #991B1B;
  --dash-red-pale-2:  #FEE2E2;

  /* ── NEUTRALS — light theme (from the Subscription page) ── */
  --dash-bg:        #ffffff;
  --dash-surface:   #ffffff;
  --dash-surface-2: #f4f2fe;                 /* lavender panel */
  --dash-surface-3: #f1eefe;                 /* pill / chip */
  --dash-line:      #e4e4ea;                 /* card + button borders */
  --dash-line-soft: rgba(28,27,43,.10);
  --dash-card-line: #e4e4ea;
  --dash-text:      #1c1b2b;                 /* headings + values */
  --dash-text-2:    #3a3950;
  --dash-text-3:    #6b6a78;                 /* muted labels + descriptions */
  --dash-text-4:    #8b8a98;

  /* ── NAVY ACCENT PANELS ── */
  --dash-navy:   #0F1B2D;
  --dash-navy-2: #1B2A42;

  /* ── WHITE OPACITY SCALE ── */
  --dash-white-04: rgba(255,255,255,.04);
  --dash-white-06: rgba(255,255,255,.06);
  --dash-white-10: rgba(255,255,255,.1);
  --dash-white-35: rgba(255,255,255,.35);
  --dash-white-45: rgba(255,255,255,.45);
  --dash-white-50: rgba(255,255,255,.5);
  --dash-white-55: rgba(255,255,255,.55);
  --dash-white-85: rgba(255,255,255,.85);

  /* ── FONT — Figtree, loaded globally in functions.php
     (weights 400, 500, 600 only) ── */
  --dash-font: 'Figtree', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --dash-font-emoji: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;

  /* ── WEIGHT SCALE — the only three weights used across the dashboard ── */
  --dash-fw-regular:  400;
  --dash-fw-medium:   500;
  --dash-fw-semibold: 600;

  /* ── TYPE SCALE — matched to the Subscription page ──
     page title "Label Plan" 20/500, card titles 14.5/500,
     body + values 15/400, muted labels 14, pill 13 ── */
  --dash-h1-size:     28px;                  /* page-level title, one step above h2 */
  --dash-h1-weight:   var(--dash-fw-medium);
  --dash-h1-tracking: -.01em;
  --dash-h1-leading:  1.2;

  --dash-h2-size:     20px;                  /* e.g. "Label Plan" */
  --dash-h2-weight:   var(--dash-fw-medium);
  --dash-h2-tracking: 0;

  --dash-h3-size:     14.5px;                /* e.g. panel titles */
  --dash-h3-weight:   var(--dash-fw-medium);
  --dash-h3-leading:  1.4;

  --dash-body-size:    15px;
  --dash-body-weight:  var(--dash-fw-regular);
  --dash-body-leading: 1.4;

  --dash-small-size:   13px;                 /* pills, helper text */
  --dash-small-weight: var(--dash-fw-regular);

  --dash-label-size:     14px;               /* muted labels: "Renews on", "Amount" */
  --dash-label-weight:   var(--dash-fw-regular);
  --dash-eyebrow-size:   11px;
  --dash-eyebrow-weight: var(--dash-fw-semibold);
  --dash-eyebrow-tracking: .08em;

  --dash-num-weight:   var(--dash-fw-medium);
  --dash-num-display-weight: var(--dash-fw-medium);
  --dash-num-tracking: 0;
  --dash-num-size: 22px;

  /* ── BUTTONS — matched to Update Card / Upgrade plan / Cancel ──
     8px radius, 11px x 17px padding, 13.5px / 500, normal case ── */
  --dash-btn-py:     11px;
  --dash-btn-px:     17px;
  --dash-btn-font:   13.5px;
  --dash-btn-weight: var(--dash-fw-medium);
  --dash-btn-radius: var(--dash-radius-md);
  --dash-btn-tracking:  0;
  --dash-btn-transform: none;

  /* ── RADIUS SCALE ──
     md (8px)  = buttons + lavender panels
     card-lg / lg (16px) = main cards (the plan card)
     pill = chips such as "Current plan" ── */
  --dash-radius-xs:      2px;
  --dash-radius-sm:      4px;
  --dash-radius-md:      8px;
  --dash-radius-card:    8px;
  --dash-radius-card-md: 12px;
  --dash-radius-card-lg: 16px;
  --dash-radius-card-xl: 20px;
  --dash-radius-lg:      16px;
  --dash-radius-pill:    999px;

  /* ── SPACING SCALE ── */
  --dash-space-xs:  4px;
  --dash-space-sm:  8px;
  --dash-space-md:  14px;
  --dash-space-lg:  20px;                    /* grid gap between panels */
  --dash-space-xl:  26px;
  --dash-space-2xl: 36px;
  --dash-gap-lower: 16px;
  --dash-gap-tight: 12px;

  --dash-accent-bar: 2px;

  /* ── PILLS + CHIPS ── */
  --dash-pill-py: 5px;
  --dash-pill-px: 12px;
  --dash-chip-py: 2px;
  --dash-chip-px: 10px;

  /* ── DECORATIVE ORBS (hero cards) ── */
  --dash-orb-lg: 340px;
  --dash-orb-sm: 240px;

  /* ── LAYOUT ── */
  --dash-sidebar-width: 240px;
  --dash-content-max:   1100px;
  --dash-content-max-mobile: 900px;
  --dash-content-narrow: 620px;
  --dash-topbar-height: 64px;
  --dash-wrap-px:       14px;

  /* ── SHADOWS ── */
  --dash-shadow-sm: 0 3px 6px rgba(15,27,45,.05);
  --dash-shadow-md: 0 8px 22px rgba(15,27,45,.10), 0 2px 6px rgba(15,27,45,.06);
  --dash-shadow-lg: 0 16px 38px rgba(15,27,45,.14), 0 5px 12px rgba(15,27,45,.08);
  --dash-shadow-xl: 0 22px 56px rgba(15,27,45,.18), 0 8px 18px rgba(15,27,45,.09);
  --dash-card-shadow: 0 14px 30px -18px rgba(108,75,255,.25);   /* plan card shadow */
  --dash-shadow-orange: 0 14px 32px rgba(232,80,10,.22);
  --dash-shadow-blue:   0 14px 32px rgba(37,99,235,.20);
  --dash-shadow-purple: 0 14px 32px rgba(108,75,255,.22);
  --dash-shadow-up:     0 -6px 24px rgba(15,27,45,.08);
  --dash-focus-ring:    0 0 0 3px var(--dash-purple-20);

  /* ── MOTION ── */
  --dash-ease-fast: .15s ease;
  --dash-ease-med:  .25s cubic-bezier(.4,0,.2,1);
  --dash-ease-slow: .3s ease;
  --dash-pulse-duration: 2s;
}