/* White + graphite with bright lemon accents. Light is the default.
   The original palette names remain aliases for existing components.
   Brand yellow stays constant; surface and text roles change together. */
@import url('theme.css?v=green-balance-add-1');
:root {
  color-scheme: light;
  --palette-yellow: #F7FF8E;
  --palette-nav-hover: var(--palette-gray);
  --palette-on-nav-hover: var(--palette-ink);
  --nav-icon-filter: brightness(0);
  --palette-ink: #20241F;
  --palette-kelly: #237248;
  --palette-funding: #0B805D;
  --palette-on-funding: #FFFFFF;
  --palette-accent: #343A35;
  --palette-slate: #3E6B88;
  --palette-analytics: var(--palette-slate);
  --palette-on-analytics: var(--palette-brand-white);
  --palette-chart-1: var(--palette-analytics);
  --palette-chart-2: color-mix(in srgb, var(--palette-analytics) 75%, var(--palette-white));
  --palette-chart-3: color-mix(in srgb, var(--palette-analytics) 50%, var(--palette-white));
  --palette-chart-4: color-mix(in srgb, var(--palette-analytics) 70%, var(--palette-ink));
  /* One secondary family supplies chart marks, badge surfaces and badge text.
     Named category aliases keep colors stable when collection order changes. */
  --palette-secondary-coral: #C8846B;
  --palette-secondary-coral-surface: #F5E2DA;
  --palette-secondary-coral-text: #80513F;
  --palette-secondary-sky: #5F8EA6;
  --palette-secondary-sky-surface: #DDEBF3;
  --palette-secondary-sky-text: #355D72;
  --palette-secondary-lilac: #9B85B3;
  --palette-secondary-lilac-surface: #EAE2F1;
  --palette-secondary-lilac-text: #655175;
  --palette-secondary-mint: #5C9675;
  --palette-secondary-mint-surface: #DEEEE4;
  --palette-secondary-mint-text: #365E47;
  --palette-secondary-lemon: #ABA84F;
  --palette-secondary-lemon-surface: #F2F1D5;
  --palette-secondary-lemon-text: #64612B;
  --palette-category-bourbon: var(--palette-secondary-coral);
  --palette-category-scotch: var(--palette-secondary-sky);
  --palette-category-japanese: var(--palette-secondary-lilac);
  --palette-category-whisky: var(--palette-secondary-lemon);
  --palette-points: var(--palette-kelly);
  --palette-points-surface: var(--palette-payment-surface);
  --palette-points-border: var(--palette-payment-border);
  --palette-unicorn: #ED7D52;
  --palette-white: #FFFFFF;
  --palette-page: #FFFFFF;
  --palette-sand: #EEEEEC;
  --palette-gray: #F0F0ED;
  --palette-photo: #FFFFFF; /* Bottle photography stays white in both modes. */
  --palette-bottle-panel: #F7F7F5;
  --palette-line: #D9DDD5;
  --palette-summary-line: #DDDFDA;
  --palette-card-border: #D9DDD5;
  --palette-card-rule: #D9DDD5;
  --palette-mute: #62665F;
  --palette-body: #41463F;
  --palette-on-yellow: #1D221A;
  --palette-action: #20241F;
  --palette-on-action: #FFFFFF;
  --palette-shadow: #1A1A1A;
  --palette-brand-white: #FFFFFF;
  --palette-inverse: #20241F;
  --palette-on-inverse: #FFFFFF;

  /* Informational blue and payment green use paired surfaces and text. */
  --palette-info: #3F6C88;
  --palette-info-surface: #E5EEF3;
  --palette-info-text: #294A60;
  --palette-info-border: #B9CDD9;
  --palette-payment-surface: #E3F1ED;
  --palette-payment-text: #215B46;
  --palette-payment-border: #B6D6C8;

  /* Activity and shipment components reuse the secondary families. */
  --palette-badge-lemon: var(--palette-secondary-lemon-surface);
  --palette-on-badge-lemon: var(--palette-secondary-lemon-text);
  --palette-badge-lilac: var(--palette-secondary-lilac-surface);
  --palette-on-badge-lilac: var(--palette-secondary-lilac-text);
  --palette-badge-sky: var(--palette-secondary-sky-surface);
  --palette-on-badge-sky: var(--palette-secondary-sky-text);
  --palette-badge-mint: var(--palette-secondary-mint-surface);
  --palette-on-badge-mint: var(--palette-secondary-mint-text);
  --palette-badge-coral: var(--palette-secondary-coral-surface);
  --palette-on-badge-coral: var(--palette-secondary-coral-text);

  /* Border roles: quiet structure, prominent controls, keyboard focus. */
  --border-default: var(--palette-line);
  --border-strong: var(--palette-ink);
  --border-focus: var(--palette-accent);

  --tone-kelly: color-mix(in srgb, var(--palette-kelly) 10%, var(--palette-white));
  --tone-slate: color-mix(in srgb, var(--palette-slate) 10%, var(--palette-white));
  --tone-unicorn: color-mix(in srgb, var(--palette-unicorn) 15%, var(--palette-white));
  --tone-yellow: var(--palette-sand);
  --tone-highlight: color-mix(in srgb, var(--palette-yellow) 25%, var(--palette-brand-white));
}

html[data-theme='dark'] {
  --palette-secondary-coral: #DDA189;
  --palette-secondary-coral-surface: #40332D;
  --palette-secondary-coral-text: #E6BAA8;
  --palette-secondary-sky: #8BB4C8;
  --palette-secondary-sky-surface: #2D3B42;
  --palette-secondary-sky-text: #B3D3E2;
  --palette-secondary-lilac: #BBA6D0;
  --palette-secondary-lilac-surface: #38323F;
  --palette-secondary-lilac-text: #D1BFDF;
  --palette-secondary-mint: #8DC2A3;
  --palette-secondary-mint-surface: #2D3D33;
  --palette-secondary-mint-text: #B4D7C2;
  --palette-secondary-lemon: #D3D184;
  --palette-secondary-lemon-surface: #3F3F2C;
  --palette-secondary-lemon-text: #E4E2AF;
  --nav-icon-filter: brightness(0) invert(1);
  --palette-slate: #A5C1D3;
  --palette-on-analytics: var(--palette-page);
  --palette-info-surface: #22343F;
  --palette-info-text: #D4E7F2;
  --palette-info-border: #466879;
  --palette-payment-surface: #1D352C;
  --palette-payment-text: #D4EBDD;
  --palette-payment-border: #426C56;
  color-scheme: dark;
  --palette-page: #191A18;
  --palette-white: #242523;
  --palette-sand: #30322F;
  --palette-gray: #2C2E2B;
  --palette-photo: #FFFFFF;
  --palette-bottle-panel: #2B2D2A;
  --palette-ink: #F5F5F0;
  --palette-body: #DDDFD8;
  --palette-mute: #BBC0B7;
  --palette-line: #444842;
  --palette-summary-line: #444842;
  --palette-card-border: #444842;
  --palette-card-rule: #596055;
  --palette-accent: #D7DBD2;
  --palette-kelly: #ACD49C;
  --palette-unicorn: #F2A083;
  --palette-action: var(--palette-yellow);
  --palette-on-action: var(--palette-on-yellow);
  --palette-inverse: #111310;
  --palette-on-inverse: #F5F5F0;
}

/* Higher specificity prevents imported app-pack :root defaults from replacing
   the shared semantic aliases. No component should define its own neutrals. */
html:root {
  --yellow: var(--palette-yellow);
  --ink: var(--palette-ink);
  --white: var(--palette-white);
  --sand: var(--palette-sand);
  --line: var(--palette-line);
  --mute: var(--palette-mute);
  --body: var(--palette-body);
  --mint: var(--tone-kelly);
  --gray-100: var(--palette-gray);
  --kelly: var(--palette-kelly);
  --kelly-2: var(--palette-kelly);
  --code-green: var(--palette-kelly);
  --slate: var(--palette-slate);
  --unicorn: var(--palette-unicorn);
  --sale: var(--palette-slate);
  --redeemed: var(--palette-slate);
  --withdraw: var(--palette-unicorn);
  --delisted: var(--palette-unicorn);
  --gold: var(--palette-yellow);
}

body { color: var(--palette-ink); background: var(--palette-page); }
a { color: inherit; }
button, input, select, textarea { color: var(--palette-ink); }