/*
 * Femmora colour tokens: the one place for brand colours.
 * Only the owner's palette (2026-10-08): #152b56 #353167 #c7bcab #fdffff #d0e3ff #f2f2eb #000000.
 * Load AFTER the Cosmetsy theme CSS (base.css), so the mapping below wins.
 * Source of truth for roles: /root/femmora-dizainas/design/brief.md
 */

:root {
  /* Surfaces */
  --fm-surface: #fdffff;            /* page background */
  --fm-surface-alt: #f2f2eb;        /* quiet sections: footer widgets, newsletter, product image backdrop */
  --fm-surface-inverse: #152b56;    /* the one dark band: top bar; also sale badge */
  --fm-surface-warm: #c7bcab;       /* one warm band: notification/promo bar; dark text only */
  --fm-surface-highlight: #d0e3ff;  /* info notices ("added to cart"), selected option */

  /* Text */
  --fm-text: #000000;               /* body text, 20.9:1 on surface */
  --fm-text-brand: #152b56;         /* headings, menu, product names, prices */
  --fm-text-on-inverse: #fdffff;    /* text on #152b56 */
  --fm-text-on-inverse-soft: #d0e3ff; /* secondary text and links on #152b56, light logo */

  /* Accent and interaction */
  --fm-accent: #353167;             /* links, active menu item, category labels, button hover */
  --fm-button: #152b56;
  --fm-button-text: #fdffff;
  --fm-button-hover: #353167;
  --fm-focus: #353167;              /* focus outline on light surfaces */
  --fm-focus-on-inverse: #d0e3ff;   /* focus outline on #152b56 */

  /* Lines */
  --fm-line: #c7bcab;               /* decorative dividers, card and table borders (not form fields) */
  --fm-line-strong: #353167;        /* form fields and checkboxes: needs 3:1, this is 11.7:1 */

  /* Logo: wordmark 6.28:1, so 32 px high = 200 px wide, 24 px high = 150 px wide */
  --fm-logo-height-desktop: 32px;
  --fm-logo-height-mobile: 24px;

  /* Type floor: nothing a visitor reads is smaller than 12px (Cosmetsy used 10–11px) */
  --fm-text-min: 12px;
  /* Form fields on phones: 16px, or iOS zooms the page when a field gets focus */
  --fm-field-text-phone: 16px;
}

/* Cosmetsy (KlbTheme) variables mapped to the Femmora roles */
:root {
  --color-main-background: var(--fm-surface);
  --color-main-text: var(--fm-text);
  --color-main-border: var(--fm-line);
  --color-primary: var(--fm-accent);

  --color-contrast-50: var(--fm-surface-alt);
  --color-contrast-100: var(--fm-surface-alt);
  --color-contrast-200: var(--fm-surface-alt);
  --color-contrast-300: var(--fm-line);
  --color-contrast-400: var(--fm-line);
  --color-contrast-500: var(--fm-accent);
  --color-contrast-600: var(--fm-accent);
  --color-contrast-700: var(--fm-accent);
  --color-contrast-800: var(--fm-text);
  --color-contrast-900: var(--fm-text);

  --color-topbar-background: var(--fm-surface-inverse);
  --color-topbar-color: var(--fm-text-on-inverse);
  --color-topbar-submenu: var(--fm-surface);
  --color-topbar-submenu-text: var(--fm-text-brand);
  --color-topbar-submenu-border: var(--fm-line);

  --color-header-background: var(--fm-surface);
  --color-header-color: var(--fm-text-brand);
  --color-header-active: var(--fm-accent);
  --color-mobile-header-background: var(--fm-surface);
  --color-mobile-header-color: var(--fm-text-brand);
  --color-mobile-header-border: var(--fm-line);

  --color-primary-menu: var(--fm-text-brand);
  --color-primary-menu-active: var(--fm-accent);
  --color-primary-submenu-background: var(--fm-surface);
  --color-primary-submenu: var(--fm-text-brand);
  --color-primary-submenu-active: var(--fm-accent);
  --color-navigation-background: var(--fm-surface);
  --color-navigation-border: var(--fm-line);

  --color-notification-bar: var(--fm-surface-warm);
  --color-notification-text: var(--fm-text-brand);

  --color-form-border: var(--fm-line-strong);
  --color-form-background: var(--fm-surface);
  --color-form-active-border: var(--fm-text);
  --color-form-active-background: var(--fm-surface);
  --color-form-placeholder: var(--fm-accent);

  --color-button-primary: var(--fm-button);
  --color-button-primary-color: var(--fm-button-text);
  --color-button-border-color: var(--fm-button);
  --color-button-active: var(--fm-button-hover);
  --color-button-active-color: var(--fm-button-text);

  --color-site-overlay: rgba(21, 43, 86, 0.4); /* #152b56 at 40% behind the off-canvas menu */
  --color-offcanvas-background: var(--fm-surface);
  --color-offcanvas-color: var(--fm-text);
  --color-offcanvas-border: var(--fm-line);

  --color-category-color: var(--fm-accent);
  --color-badge-onsale: var(--fm-surface-inverse);

  --color-footer-widget-background: var(--fm-surface-alt);
  --color-footer-widget-border: var(--fm-line);
  --color-footer-widget-color: var(--fm-text);
  --color-footer-widget-link: var(--fm-text-brand);
  --color-subfooter-background: var(--fm-surface-alt);
  --color-subfooter-border: var(--fm-line);
  --color-subfooter-color: var(--fm-text-brand);
  --color-newsletter-background: var(--fm-surface-alt);
  --color-newsletter-border: var(--fm-line);
  --color-newsletter-color: var(--fm-text-brand);

  --size-desktop-logo-height: var(--fm-logo-height-desktop);
  --size-mobile-logo-height: var(--fm-logo-height-mobile);

  --font-button-font-size: var(--fm-text-min);
  --font-category-font-size: var(--fm-text-min);
}

@media screen and (max-width: 62rem) {
  :root {
    --font-form-font-size: var(--fm-field-text-phone);
  }
}

:focus-visible { outline: 2px solid var(--fm-focus); outline-offset: 2px; }