/* ==========================================================================
   Fashnal design tokens — self-hosted fonts + brand re-theme of Bootstrap.

   Bootstrap 5.3's compiled CSS bakes each component's colors into its own
   local custom properties (e.g. .btn-primary{--bs-btn-bg:#0d6efd}) rather
   than reading a root --bs-primary at runtime — so re-theming means
   overriding those component-level properties on the same selector, not
   just redefining --bs-primary once. See each block below.
   ========================================================================== */

/* ---- Self-hosted type (see public/assets/vendor/README.md) ------------- */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/vendor/fonts/jakarta-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/vendor/fonts/jakarta-sans-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/vendor/fonts/jakarta-sans-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/vendor/fonts/plex-sans-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/vendor/fonts/plex-sans-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/vendor/fonts/plex-sans-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Brand palette -------------------------------------------------------
   Same brand as the product design document — deep "fjord" teal (trust,
   Norway) + a berry accent (fashion warmth), on a warm sage-grey ground
   rather than plain white or the generic cream+terracotta look. */
:root {
  --ink:        #17222A;
  --ink-soft:   #4B5B60;
  --ink-faint:  #7C8A8D;
  --paper:      #F1F3F2;
  --surface:    #FFFFFF;
  --surface-2:  #E7ECEA;
  --border:     #D6DCD9;
  --fjord:      #1F6B82;
  --fjord-ink:  #0F4C5F;
  --fjord-soft: #E3EEF0;
  --berry:      #8C3A56;
  --berry-soft: #F5E6EC;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-border-color: var(--border);
  --bs-link-color: var(--fjord-ink);
  --bs-link-color-rgb: 15, 76, 95;
  --bs-link-hover-color: var(--ink);
}

body { background: var(--paper); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .navbar-brand {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* ---- Component re-theme (brand color = --fjord) -------------------------- */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--fjord);
  --bs-btn-border-color: var(--fjord);
  --bs-btn-hover-bg: var(--fjord-ink);
  --bs-btn-hover-border-color: var(--fjord-ink);
  --bs-btn-active-bg: var(--fjord-ink);
  --bs-btn-active-border-color: var(--fjord-ink);
  --bs-btn-disabled-bg: var(--fjord);
  --bs-btn-disabled-border-color: var(--fjord);
  --bs-btn-focus-shadow-rgb: 31, 107, 130;
}
.btn-outline-primary {
  --bs-btn-color: var(--fjord);
  --bs-btn-border-color: var(--fjord);
  --bs-btn-hover-bg: var(--fjord);
  --bs-btn-hover-border-color: var(--fjord);
  --bs-btn-active-bg: var(--fjord);
  --bs-btn-active-border-color: var(--fjord);
  --bs-btn-focus-shadow-rgb: 31, 107, 130;
}
.btn-outline-secondary {
  --bs-btn-color: var(--ink-soft);
  --bs-btn-border-color: var(--border);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--ink);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--fjord);
}
.progress-bar {
  background-color: var(--fjord);
}
.form-control:focus, .form-select:focus {
  border-color: var(--fjord);
  box-shadow: 0 0 0 0.25rem rgba(31, 107, 130, 0.15);
}
.card {
  border-color: var(--border);
}