/*
Theme Name: Horological Excellence
Theme URI: https://example.com
Author: Custom Build
Author URI: https://example.com
Description: Premium WooCommerce tema za prodaju satova — Minimalist Luxury / Noir et Or (crno-zlatna) estetika. Uključuje prodavnicu, stranice za graviranje i popravku satova sa cjenovnicima i formama, te O nama i Kontakt stranice. Potpuno na bosanskom jeziku.
Version: 1.8.7
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: horological-excellence
Domain Path: /languages
Tags: e-commerce, woocommerce, custom-menu, featured-images, translation-ready, custom-logo
*/

/* ==========================================================================
   DESIGN TOKENS — derived from DESIGN.md
   ========================================================================== */

:root {
  /* Colors */
  --color-surface: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-bright: #f9f9f9;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f3;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-on-surface: #1b1b1b;
  --color-on-surface-variant: #4c4546;
  --color-inverse-surface: #303030;
  --color-inverse-on-surface: #f1f1f1;
  --color-outline: #7e7576;
  --color-outline-variant: #cfc4c5;
  --color-surface-tint: #5e5e5e;

  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-primary-container: #1b1b1b;
  --color-on-primary-container: #848484;
  --color-inverse-primary: #c6c6c6;

  --color-secondary: #6e5e00;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fee25d;
  --color-on-secondary-container: #756400;

  --color-tertiary: #000000;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #1a1c1b;
  --color-on-tertiary-container: #838483;

  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-primary-fixed: #e2e2e2;
  --color-primary-fixed-dim: #c6c6c6;
  --color-on-primary-fixed: #1b1b1b;
  --color-on-primary-fixed-variant: #474747;
  --color-secondary-fixed: #fee25d;
  --color-secondary-fixed-dim: #e1c644;
  --color-on-secondary-fixed: #211b00;
  --color-on-secondary-fixed-variant: #534600;
  --color-tertiary-fixed: #e2e3e1;
  --color-tertiary-fixed-dim: #c6c7c5;
  --color-on-tertiary-fixed: #1a1c1b;
  --color-on-tertiary-fixed-variant: #454746;

  --color-background: #f9f9f9;
  --color-on-background: #1b1b1b;
  --color-surface-variant: #e2e2e2;

  /* Brand specific */
  --color-heritage-gold: #E3C846;
  --color-onyx-black: #000000;
  --color-alabaster-white: #FFFFFF;
  --color-platinum-gray: #E5E5E5;

  /* Typography */
  --font-serif: 'Libre Caslon Text', 'Georgia', serif;
  --font-sans: 'Manrope', -apple-system, sans-serif;

  --type-display-lg-size: 64px;
  --type-display-lg-weight: 400;
  --type-display-lg-leading: 72px;
  --type-display-lg-spacing: -0.02em;

  --type-headline-lg-size: 48px;
  --type-headline-lg-weight: 400;
  --type-headline-lg-leading: 56px;

  --type-headline-lg-mobile-size: 32px;
  --type-headline-lg-mobile-leading: 40px;

  --type-headline-md-size: 32px;
  --type-headline-md-weight: 400;
  --type-headline-md-leading: 40px;

  --type-body-lg-size: 18px;
  --type-body-lg-weight: 400;
  --type-body-lg-leading: 28px;

  --type-body-md-size: 16px;
  --type-body-md-weight: 400;
  --type-body-md-leading: 24px;

  --type-label-lg-size: 14px;
  --type-label-lg-weight: 600;
  --type-label-lg-leading: 20px;
  --type-label-lg-spacing: 0.1em;

  --type-label-sm-size: 12px;
  --type-label-sm-weight: 500;
  --type-label-sm-leading: 16px;
  --type-label-sm-spacing: 0.05em;

  /* Spacing */
  --space-unit: 8px;
  --space-gutter: 24px;
  --space-margin-desktop: 80px;
  --space-margin-mobile: 20px;
  --space-section-gap: 120px;

  /* Shape */
  --radius-none: 0px;

  /* Elevation */
  --overlay-backdrop: rgba(0, 0, 0, 0.8);
  --border-hairline: 1px solid var(--color-platinum-gray);
}