/* ==========================================================================
   base.css — reset, design tokens, typography
   Tokens mirror the live furnitureconcept.com.bd theme (Woodmart) values,
   except the brand colour, which comes from the client's own logo.

   THEMING. The brand is a black card with an orange plate, so dark is the
   house look and every visitor gets it on a first visit — the palette below
   is dark, and the light palette is the opt-in alternative further down.
   The OS prefers-color-scheme setting is deliberately NOT consulted: it
   would hand half the audience a white site the brand never asked for.
   Only the colour tokens flip between themes. Anything that is a colour
   belongs in this block, never inline in a component rule, or it will be
   right in one theme and wrong in the other.
   ========================================================================== */

:root {
  /* Browser-painted furniture — select drop-downs, scrollbars, spinners —
     follows this, not the tokens below. Without it they stay light while the
     page is dark. */
  color-scheme: dark;

  /* ---- brand colour ----
     The logo orange carries the brand on both grounds. On black it is also
     legible as type (7.4:1), so -ink brightens rather than darkens here;
     the light theme darkens it instead, where the fill is only 2.41:1.
     -on-primary is the ink that sits on an orange plate, exactly as the
     logo sets "FURNIST". */
  --fc-primary:        #fa8a00;  /* logo orange — fills, plates, accents */
  --fc-primary-ink:    #ffa733;  /* text on black: 7.42:1 */
  --fc-primary-hover:  #ffa02e;  /* fill hover only */
  --fc-primary-dark:   #ffbf66;  /* text hover: 10.1:1 on #0b0b0b */
  --fc-on-primary:     #141414;  /* type on the orange plate: 7.63:1 */

  /* Danger is its own hue. While the brand was red, error borders and
     messages could lean on --fc-primary and still read as "wrong"; an orange
     brand cannot carry that meaning, so errors get a dedicated red — lifted
     here so it clears 4.5:1 on the black ground. */
  --fc-danger:         #ff6b6b;  /* 6.1:1 on #0b0b0b */

  /* ---- text / surfaces ----
     --fc-white is a legacy name kept because it is referenced across the
     sheets; read it as "the card surface", not as the colour white. The
     ink that must stay light on a permanently dark plate is --fc-on-dark,
     which never flips. */
  --fc-text:           #ded7c9;
  --fc-text-soft:      #a29a8c;
  --fc-title:          #f4efe4;
  --fc-entities-title: #f7f3ea;
  --fc-white:          #151515;  /* card / panel surface */
  --fc-alt-bg:         #1d1d1d;  /* raised or striped surface */
  --fc-page-bg:        #0b0b0b;  /* the ground the page paints */
  --fc-dark-bg:        #141414;  /* plates that are dark in BOTH themes */
  --fc-on-dark:        #ffffff;  /* ink on those plates — never flips */
  --fc-on-dark-soft:   rgba(255, 255, 255, 0.82);  /* secondary ink on those plates */
  --fc-on-dark-dim:    rgba(255, 255, 255, 0.55);  /* labels and captions there */
  --fc-on-dark-line:   rgba(255, 255, 255, 0.22);  /* hairlines on those plates */
  --fc-on-dark-plate:  rgba(255, 255, 255, 0.08);  /* an inset panel on those plates */
  --fc-footer-bg:      #0f0f0f;
  --fc-border:         rgba(255, 255, 255, 0.11);
  --fc-border-strong:  rgba(255, 255, 255, 0.17);

  /* Semantic, not brand: these keep their meaning in both themes and are
     only lifted in the dark one so they clear 4.5:1 on black. */
  --fc-success:        #51cf66;
  --fc-whatsapp:       #25d366;

  /* Glass = a panel that floats over page content (sticky header, drawers).
     Scrim = a wash laid over imagery to keep type legible on top of it. */
  --fc-glass:          rgba(17, 17, 17, 0.92);
  --fc-glass-soft:     rgba(17, 17, 17, 0.82);
  --fc-scrim:          rgba(0, 0, 0, 0.55);
  --fc-scrim-soft:     rgba(0, 0, 0, 0.35);

  /* ---- typography ---- */
  --fc-font-text:   "Poppins", Arial, Helvetica, sans-serif;
  --fc-font-title:  "Poppins", Arial, Helvetica, sans-serif;
  --fc-font-header: "Inter", Arial, Helvetica, sans-serif;
  --fc-font-alt:    "Open Sans", Arial, Helvetica, sans-serif;
  --fc-text-size:   15px;
  --fc-text-weight: 400;
  --fc-title-weight: 600;

  /* ---- header metrics ---- */
  --fc-header-h:        100px;
  --fc-header-bottom-h: 52px;
  --fc-header-el-size:  13px;

  /* ---- shape ---- */
  --fc-radius:      8px;
  --fc-form-radius: 5px;
  --fc-form-height: 42px;
  --fc-form-brd-w:  2px;

  /* ---- layout ---- */
  --fc-container:   1222px;
  --fc-gap:         20px;
  --fc-gap-sm:      10px;

  /* ---- effects ----
     A black shadow does nothing on a black ground, so the dark theme leans
     on the hairline borders above for separation and keeps the shadow only
     for depth under floating panels. */
  --fc-shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.5);
  --fc-shadow:      0 0 12px rgba(0, 0, 0, 0.55);
  --fc-shadow-lg:   0 8px 28px rgba(0, 0, 0, 0.65);
  --fc-transition:  0.25s ease;
  --fc-z-header:    390;
  --fc-z-overlay:   500;
}

/* ==========================================================================
   Light theme — the opt-in alternative, reached only by the header toggle
   (which stores the choice) and never by an OS setting. Colour tokens only:
   every metric, font and radius above is shared.
   ========================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --fc-primary-ink:    #a85800;  /* 5.17:1 on #fff, 4.7:1 on #f4f4f4 */
  --fc-primary-hover:  #e07a00;
  --fc-primary-dark:   #8f4b00;  /* 6.62:1 on #fff */
  --fc-danger:         #c62828;  /* 5.62:1 on #fff */

  --fc-text:           rgb(56, 56, 56);
  --fc-text-soft:      #767676;
  --fc-title:          #242424;
  --fc-entities-title: rgb(26, 26, 26);
  --fc-white:          #ffffff;
  --fc-alt-bg:         rgb(244, 244, 244);
  --fc-page-bg:        #ffffff;
  --fc-dark-bg:        #1a1a1a;
  --fc-footer-bg:      #f7f7f7;
  --fc-border:         rgba(0, 0, 0, 0.105);
  --fc-border-strong:  #ececec;

  --fc-glass:          rgba(255, 255, 255, 0.94);
  --fc-glass-soft:     rgba(255, 255, 255, 0.86);
  --fc-scrim:          rgba(0, 0, 0, 0.45);
  --fc-scrim-soft:     rgba(0, 0, 0, 0.28);

  --fc-success:        #2f9e44;  /* 3.9:1 on #fff as a fill, never as type */

  --fc-shadow-sm:      0 2px 6px rgba(0, 0, 0, 0.04);
  --fc-shadow:         0 0 12px rgba(0, 0, 0, 0.08);
  --fc-shadow-lg:      0 6px 24px rgba(0, 0, 0, 0.12);
}

/* Swapping the palette mid-page otherwise cross-fades every transition the
   page owns, each at its own duration, which reads as a stutter rather than
   a switch. The class is set around the swap and cleared on a timer —
   requestAnimationFrame does not reliably fire in a backgrounded tab, and a
   class stuck on would kill every hover transition for the rest of the
   session. */
:root.fc-theme-switching *,
:root.fc-theme-switching *::before,
:root.fc-theme-switching *::after {
  transition: none !important;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* safety net: nothing may scroll the page sideways */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--fc-font-text);
  font-size: var(--fc-text-size);
  font-weight: var(--fc-text-weight);
  line-height: 1.6;
  color: var(--fc-text);
  background-color: var(--fc-page-bg);
  overflow-x: hidden;
  transition: background-color var(--fc-transition), color var(--fc-transition);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 12px;
  font-family: var(--fc-font-title);
  font-weight: var(--fc-title-weight);
  line-height: 1.3;
  color: var(--fc-title);
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p { margin: 0 0 16px; }

a {
  color: var(--fc-text);
  text-decoration: none;
  transition: color var(--fc-transition);
}
a:hover { color: var(--fc-primary-dark); }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

ul, ol { margin: 0 0 16px; padding-left: 20px; }
ul.fc-plain { list-style: none; margin: 0; padding: 0; }

button { font-family: inherit; cursor: pointer; }

input, select, textarea { font-family: inherit; font-size: 14px; }

/* A <select>'s drop-down list is painted by the browser, not by the page, so
   it took the OS light colours while inheriting the page's off-white ink —
   pale grey on white, barely readable. color-scheme (set with the palette
   above) is what tells the browser which native colours to use; these rules
   then state the list's own surface and put the brand on the current row,
   instead of the OS accent blue. */
option {
  background-color: var(--fc-white);
  color: var(--fc-text);
}
option:checked {
  /* a flat background-color is ignored for the selected row in some engines;
     a gradient of one colour is the accepted way to force it */
  background: var(--fc-primary) linear-gradient(var(--fc-primary), var(--fc-primary));
  color: var(--fc-on-primary);
}

/* The row under the pointer is the one thing the native list will not hand
   over — it paints that with the OS accent. Engines that support the
   customisable select (Chromium 135+) let the page draw the list itself, so
   opt in there and give the hovered row the brand. Everywhere else the native
   list stays, with the two rules above; only its hover colour differs. */
@supports (appearance: base-select) {
  select,
  ::picker(select) { appearance: base-select; }

  /* The base appearance turns the control into a flex box that fills its row,
     so the label needs centring the native control did for us. */
  select { align-items: center; }

  /* ::picker(select) is the list box itself; the rows are addressed as plain
     options, since a descendant selector after a pseudo-element does not
     match. */
  ::picker(select) {
    padding: 6px;
    border: 1px solid var(--fc-border-strong);
    border-radius: var(--fc-form-radius);
    background-color: var(--fc-white);
    box-shadow: var(--fc-shadow-lg);
  }
  option {
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--fc-text);
  }
  /* Two different jobs, so two different weights: the current choice is a
     quiet tinted row, the row under the pointer takes the full plate. */
  option:checked {
    background: var(--fc-alt-bg);
    color: var(--fc-primary-ink);
  }
  option:hover,
  option:focus {
    background: var(--fc-primary);
    color: var(--fc-on-primary);
  }

  /* the tick the base appearance adds beside the current row — the fill
     already says which one it is */
  ::checkmark { display: none; }
}

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--fc-border); margin: 30px 0; }

/* ---------- accessibility helpers ---------- */
.fc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fc-skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 999;
  padding: 10px 16px;
  background: var(--fc-primary);
  color: var(--fc-on-primary);
  border-radius: 0 0 var(--fc-form-radius) var(--fc-form-radius);
  transition: top var(--fc-transition);
}
.fc-skip-link:focus { top: 0; color: var(--fc-on-primary); }

/* the ring must stay perceivable, so it uses the darkened ink, not the fill */
:focus-visible {
  outline: 2px solid var(--fc-primary-ink);
  outline-offset: 2px;
}

/* ---------- text utilities ---------- */
.fc-uppercase { text-transform: uppercase; }
.fc-center    { text-align: center; }
.fc-muted     { color: var(--fc-text-soft); }
.fc-accent    { color: var(--fc-primary-ink); }
.fc-nowrap    { white-space: nowrap; }