/* YWF Team design source of truth. Preview these values at /admin/style-guide.
   Use these tokens in product components; keep app-specific layouts in their own CSS. */
:root {
  /* Brand: lavender, ink and the logo's candy colors, taken from youngwildandfriedman.com.
     Candy colors decorate (icon tiles, avatars, empty states); they never carry meaning. */
  --color-brand: #cda3d8;
  --color-ink: #2b1b3d;
  --color-accent: #6f4a80;
  --color-accent-soft: #f1e5f4;
  --color-candy-pink: #f6a4ba;
  --color-candy-orange: #fdc362;
  --color-candy-yellow: #f7f375;
  --color-candy-green: #aed98c;
  --color-candy-sky: #92dbed;
  --color-candy-lavender: var(--color-brand);

  --color-sidebar: var(--color-brand);
  --color-sidebar-selected: #ffffff;
  --color-sidebar-hover: #dcbde4;
  --color-sidebar-muted: #4a3857;
  --color-sidebar-line: #b78ec3;
  --color-sidebar-input-border: var(--color-accent);
  --color-sidebar-badge: var(--color-accent-soft);

  --color-page: #f8f6f9;
  --color-surface: #ffffff;
  --color-surface-subtle: #f3eff5;
  --color-surface-selected: #ebe5ee;
  --color-text: var(--color-ink);
  --color-text-muted: #6b6074;
  --color-link: var(--color-accent);
  --color-border: #e9e3ec;
  --color-control-border: #857c8d;
  --color-action: var(--color-ink);
  --color-action-hover: #45325c;
  --color-on-action: #ffffff;
  --color-focus: var(--color-accent);

  /* Status tones: a tint for badges and banners, a fill for dots and solid buttons. */
  --color-success: #24603f;
  --color-success-fill: #1e7847;
  --color-success-surface: #edf8f1;
  --color-success-border: #cfe3d7;
  --color-warning: #805b13;
  --color-warning-fill: #91660f;
  --color-warning-surface: #fff7df;
  --color-warning-border: #ecd49c;
  --color-danger: #93372f;
  --color-danger-fill: #b0433c;
  --color-danger-surface: #fff6f5;
  --color-danger-border: #e6c3c0;
  --color-info: #385d75;
  --color-info-surface: #e6f5fa;
  --color-info-border: #c5e6f1;
  /* Ready is the Info tone; the names stay for the components that use them. */
  --color-ready: var(--color-info);
  --color-ready-surface: var(--color-info-surface);
  --color-ready-border: var(--color-info-border);

  --color-chart-wholesale: #9263aa;
  --color-chart-subscription: #278778;
  --color-chart-b2c: #c96a54;
  --color-chart-prior: #566873;
  --color-chart-footprint: #5f8ba3;
  --color-preorder: #7a3d57;
  --color-preorder-surface: #fff1f6;
  --color-kind-jar: #2a72ab;
  --color-kind-bag: #a8720c;
  --color-kind-slime: #d4628f;
  --color-kind-kit: #1e7847;
  --color-kind-other: #9455ad;
  --color-overlay: #2b1b3d66;
  --color-on-action-soft: #ffffff24;
  --color-chart-hover: #2b1b3d08;
  --color-picker: #3483ac;
  --color-picker-surface: #4f9ac218;
  --color-picker-ring: #ffffff88;

  /* Type: Figtree, the storefront's own face. Seven sizes, three weights, 12px floor. */
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --text-xs: .75rem;
  --text-sm: .8125rem;
  --text-md: .875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.625rem;
  --text-3xl: 2rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --radius-card: 16px;
  --radius-control: 10px;
  --radius-small: 8px;
  --radius-pill: 999px;
  --radius-button: var(--radius-pill);
  --control-height: 2.25rem;
  --control-height-small: 1.75rem;
  --shadow-card: 0 1px 2px #2b1b3d0d;
  --shadow-popover: 0 8px 24px #2b1b3d24;
  --shadow-dialog: 0 18px 65px #2b1b3d33;
  --shadow-drawer: -8px 0 30px #2b1b3d22;
  --shadow-control: 0 1px 2px #2b1b3d33;
  --card-padding-y: 1.25rem;
  --card-padding-x: 1.5rem;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Compatibility names keep every existing component on the same palette. */
  --side-bg: var(--color-sidebar); --side-ink: var(--color-text);
  --side-dim: var(--color-sidebar-muted); --side-hover: var(--color-sidebar-hover);
  --side-selected: var(--color-sidebar-selected); --side-line: var(--color-sidebar-line);
  --surface-card: var(--color-surface); --surface-inset: var(--color-surface-subtle);
  --accent-soft: var(--color-surface-selected);
  --ywf-lavender: var(--color-brand);
  --ywf-cream: var(--color-page);
  --ywf-sky: var(--color-info-surface); --ywf-pink: var(--color-preorder-surface);
  --ywf-steel: var(--color-link); --ywf-steel-dark: var(--color-text);
  --ywf-ink: var(--color-text); --ywf-gray: var(--color-text-muted);
  --ywf-mist: var(--color-border); --ywf-white: var(--color-surface);
  --ywf-font-body: var(--font-body); --ywf-font-display: var(--font-heading);
  --good: var(--color-success-fill); --warn: var(--color-warning-fill); --bad: var(--color-danger-fill);
  --c1: var(--color-kind-jar); --c2: var(--color-kind-bag); --c3: var(--color-kind-slime);
  --c4: var(--color-kind-kit); --c5: var(--color-kind-other); --c6: var(--color-chart-b2c);
}