/* ============================================================
   Wallie design tokens (shared across every POC)
   Sourced from shared-ui themes.css ([data-theme="wallie"]),
   tailwind.config.js, Badge.tsx and Switch.tsx (token-parity pass),
   extended with the 03 Components Figma library (design/
   figma-components-manifest.json): full blue/error scales, pink,
   the AI ink surface and the shared focus ring.
   Load order per page: wallie-tokens.css, wallie-ui.css, then the
   POC's own stylesheet.
   ============================================================ */
:root {
  /* Primary (Wallie blue = blue scale) */
  --primary-25: #F5F5FF;
  --primary-500: #5757FF;
  --primary-600: #3333FF;
  --primary-700: #0000FF;
  --primary-800: #0000D6;
  --primary-900: #0000A3;
  --primary-950: #00005C;
  --primary-border: #0000D6;
  --primary-border-hover: #0000A3;
  --primary-50: #EBEBFF;
  --primary-100: #E0E0FF;
  --primary-200: #CCCCFF;
  --primary-300: #A8A8FF;
  --primary-400: #8080FF;
  --shadow-primary: 0 2px 4px 0 rgba(0, 0, 255, .10), 0 4px 8px 0 rgba(0, 0, 255, .10);
  --shadow-soft: 0 1px 2px 0 rgba(61, 61, 92, .04), 0 2px 4px 0 rgba(61, 61, 92, .04);
  /* Card, popover and dark-surface shadows (03 Components) */
  --shadow-card: 0 1px 2px 0 rgba(61, 61, 92, .04), 0 2px 4px 0 rgba(61, 61, 92, .04), 0 4px 8px 0 rgba(61, 61, 92, .06), 0 8px 16px 0 rgba(61, 61, 92, .04);
  --shadow-pop: 0 1px 2px 0 rgba(0, 0, 0, .02), 0 2px 4px 0 rgba(0, 0, 0, .04), 0 6px 12px 0 rgba(0, 0, 0, .05);
  --shadow-dark: 0 2px 4px 0 rgba(22, 22, 29, .14), 0 8px 8px 0 rgba(22, 22, 29, .14);
  /* Focus ring: 2px white gap + 4px periwinkle (every focusable control) */
  --focus-ring: 0 0 0 2px #fff, 0 0 0 4px var(--primary-400);
  --focus-ring-danger: 0 0 0 2px #fff, 0 0 0 4px var(--error-500);
  /* AI gradient (angular border on AI buttons, badges, upload zones) */
  --ai-conic: conic-gradient(from 180deg, #FF7F66 0%, #E3E303 12%, #FF6696 37%, #8080FF 62%, #25FDA3 88%, #FF7F66 100%);
  --ai-conic-soft: conic-gradient(from 180deg, #FFB2A3 0%, #F3EC9A 12%, #FF99B9 37%, #A8A8FF 62%, #71FFC5 88%, #FFB2A3 100%);

  /* Surfaces */
  --bg: #f9fafb;
  --card: #ffffff;
  --card-alt: #f3f3f7;
  --border: #dedeed;
  --border-soft: #ececf3;

  /* Grey-blue scale (exact) */
  --gb-25: #F9F9FB; --gb-50: #F2F2F7; --gb-100: #ECECF3; --gb-200: #E0E0EB;
  --gb-300: #C2C2D6; --gb-400: #B3B3CC; --gb-500: #9494B7; --gb-600: #7676A3;
  --gb-700: #666699; --gb-800: #52527A; --gb-900: #3D3D5C; --gb-950: #29293D;

  /* Text — default #1f1f2e, strong = greyBlue-950 */
  --text: #1f1f2e;
  --text-strong: #29293D;
  /* Purpose colours (shared-ui themes.css since COD-5104): name the job, not the
     scale step. --muted is the secondary text and follows text-secondary. */
  --text-heading: #29293D;      /* greyBlue-950 */
  --text-main: #3D3D5C;         /* greyBlue-900 */
  --text-secondary: #666699;    /* greyBlue-700 */
  --text-disabled: #B3B3CC;     /* greyBlue-400 */
  --icon: #7676A3;              /* greyBlue-600: icon-default */
  --icon-decorative: #B3B3CC;   /* greyBlue-400 */
  --border-control: #8585AA;    /* control and badge borders */
  --border-divider: #dedeed;    /* lines between rows and panes */
  --border-disabled: #E0E0EB;   /* greyBlue-200 */
  --muted: #666699;

  /* Sidebar */
  --sidebar-bg: #16161d;
  --sidebar-border: #232329;
  --sidebar-text: #B3B3CC;
  --sidebar-accent: #7676A3;
  --sidebar-search: #121217;

  /* Status palettes (Badge.tsx exact: bg / border / text) */
  --green-bg: #E6F0E8; --green-bd: #B3D1BA; --green-tx: #01651A;          /* green-200/300/700 */
  --teal-bg: #AEFFDE; --teal-bd: #71FFC5; --teal-tx: #00854E;             /* tealGreen-200/300/700 */
  --teal-500: #00D67D;                                                    /* success icons, presence dot */
  --yellow-bg: #F9F6CD; --yellow-bd: #F3EC9A; --yellow-tx: #978B02;       /* yellow-200/300/600 */
  --yellow-400: #E3E303; --yellow-500: #C9B903;                           /* warning icons, badge dot */
  /* Yellow badge text. --yellow-tx (yellow-600) is only 3.2:1 on --yellow-bg; this
     is 5.0:1 (WCAG AA). Same value as the product's selected yellow badge text. */
  --yellow-700: #746A02;
  --amber-bg: #ffedd5; --amber-bd: #9a3412; --amber-tx: #9a3412;          /* accent decline pair */
  --warn-bg: #fff4e5; --warn-tx: #fa9c29;                                 /* accent warning pair */
  --error-bg: #FFE5E0; --error-bd: #FFD4CC; --error-tx: #B21E00;          /* error-100/200/700 */
  --error-strong: #CC2200;
  --error-25: #FFF6F5; --error-50: #FFEEEB; --error-300: #FFB2A3;         /* destructive surfaces */
  --error-400: #FF7F66; --error-500: #FF4C29;                             /* destructive borders, ghost text */
  --error-800: #8F1800; --error-900: #7A1500;                             /* destructive solid borders */
  --blue-bg: #E0E0FF; --blue-bd: #CCCCFF; --blue-tx: #0000D6;             /* blue-100/200/800 */
  --greygreen-bg: #E0EBE6; --greygreen-bd: #C2D6CD; --greygreen-tx: #2D433A; /* greyGreen-200/300/800 */
  --grey-bg: #E0E0EB; --grey-bd: #8585AA; --grey-tx: #3D3D5C;             /* greyBlue-200, border-control, text-main (COD-5104) */
  --pink-bg: #FFE5ED; --pink-bd: #FFCCDC; --pink-tx: #CC0040;             /* pink-100/200/700 (COD-5104) */
  --pink-600: #FF0050;
  --pink-700: #CC0040;                                                    /* feedback pins; the pink badge text since COD-5104 */
  --pink-800: #990030;                                                    /* selected pink badge text */
  --purple-bg: #F3EBFF; --purple-bd: #E2D4FB; --purple-tx: #6B21A8;       /* scheduled/automation accent */
  --ink: #121217;                                                         /* AI surface: tooltips, toaster, AI dark button */

  --r-sm: 4px;   /* --rounded-sm */
  --r-md: 8px;   /* --rounded-md */
  --r-lg: 12px;
  /* Type scale steps of the product (tailwind text-xs, text-sm, text-xl): size and line height.
     GAPS 50: pages read these instead of writing pixel values. */
  --text-xs: 12px; --lh-xs: 16px;
  --text-sm: 14px; --lh-sm: 20px;
  --text-xl: 20px; --lh-xl: 28px;
  --font: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}