/* ---------------------------------------------------------------------------
   Outsource China — design tokens

   Light is the canonical theme: it is the default, the one product photography
   is shot against, and the one every colour decision is made in. Dark is
   derived from it. Names are semantic (--surface-raised), never literal
   (--gray-50), so the dark override is a value swap and not a rename.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg:               #f4efe6;
  --surface:          #ffffff;
  --surface-raised:   #ffffff;
  --surface-sunken:   #f7f8f9;
  --surface-hover:    #f2f4f6;

  /* Product photography sits on a light plate in BOTH themes. Colour fidelity
     is a purchasing decision — a buyer choosing a fabric shade must see the
     true colour whichever theme they are in. */
  --photo-plate:      #ffffff;

  /* Navigation — the deep bar that anchors the whole catalogue */
  --nav:              #131e2e;
  --nav-2:            #1d2c42;
  --nav-text:         #f4f6f8;
  --nav-text-muted:   #a9b6c6;
  --nav-border:       #26364d;

  /* Text */
  --text:             #151a1f;
  --text-muted:       #5a646f;
  --text-subtle:      #808b96;
  --text-inverse:     #ffffff;

  /* Lines */
  --border:           #dde2e6;
  --border-strong:    #c3cbd2;

  /* Brand — the "Request Quote" colour */
  --brand:            #f2a032;
  --brand-hover:      #e08f1e;
  --brand-contrast:   #21180a;
  --brand-on-dark:    #f8b65c;
  --brand-subtle:     #fdf3e3;

  /* Accent — links and secondary actions */
  --accent:           #0a6e80;
  --accent-hover:     #085765;
  --accent-subtle:    #e6f3f6;

  /* Status */
  --success:          #1c7a4a;
  --success-subtle:   #e6f4ec;
  --warning:          #9a6212;
  --warning-subtle:   #fdf2df;
  --danger:           #b3261e;
  --danger-subtle:    #fdeceb;
  --info:             #1e5fa8;
  --info-subtle:      #e8f1fb;

  /* Commercial signals */
  --moq:              #5a646f;

  /* Elevation */
  --shadow-sm:  0 1px 2px rgba(16, 24, 32, .06);
  --shadow:     0 2px 8px rgba(16, 24, 32, .08);
  --shadow-lg:  0 12px 32px rgba(16, 24, 32, .14);
  --ring:       0 0 0 3px rgba(10, 110, 128, .28);

  /* Geometry */
  --radius-sm: 5px;
  --radius:    9px;
  --radius-lg: 14px;
  --maxw:      1480px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark, when the OS asks for it and the user has not explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:               #0e1319;
    --surface:          #161c23;
    --surface-raised:   #1c242d;
    --surface-sunken:   #12181e;
    --surface-hover:    #212a34;

    --photo-plate:      #f4f5f6;   /* still light — see note above */

    --nav:              #0a0f16;
    --nav-2:            #141d29;
    --nav-text:         #e8ecf1;
    --nav-text-muted:   #94a2b3;
    --nav-border:       #1f2a38;

    --text:             #e6eaef;
    --text-muted:       #9aa5b1;
    --text-subtle:      #7b8695;
    --text-inverse:     #0e1319;

    --border:           #28323d;
    --border-strong:    #3a4756;

    --brand:            #f5ac48;
    --brand-hover:      #ffbe66;
    --brand-contrast:   #1a1204;
    --brand-on-dark:    #f8bd63;
    --brand-subtle:     #2a2113;

    --accent:           #4fc3d9;
    --accent-hover:     #7ad4e6;
    --accent-subtle:    #122c33;

    --success:          #4ec98a;
    --success-subtle:   #12291d;
    --warning:          #e0aa4d;
    --warning-subtle:   #2b2314;
    --danger:           #f28b82;
    --danger-subtle:    #2e1917;
    --info:             #7cb2f0;
    --info-subtle:      #16232f;

    --moq:              #9aa5b1;

    --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
    --shadow:     0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg:  0 14px 36px rgba(0, 0, 0, .55);
    --ring:       0 0 0 3px rgba(79, 195, 217, .35);
  }
}

/* An explicit choice wins in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:               #0e1319;
  --surface:          #161c23;
  --surface-raised:   #1c242d;
  --surface-sunken:   #12181e;
  --surface-hover:    #212a34;

  --photo-plate:      #f4f5f6;

  --nav:              #0a0f16;
  --nav-2:            #141d29;
  --nav-text:         #e8ecf1;
  --nav-text-muted:   #94a2b3;
  --nav-border:       #1f2a38;

  --text:             #e6eaef;
  --text-muted:       #9aa5b1;
  --text-subtle:      #7b8695;
  --text-inverse:     #0e1319;

  --border:           #28323d;
  --border-strong:    #3a4756;

  --brand:            #f5ac48;
  --brand-hover:      #ffbe66;
  --brand-contrast:   #1a1204;
  --brand-on-dark:    #f8bd63;
  --brand-subtle:     #2a2113;

  --accent:           #4fc3d9;
  --accent-hover:     #7ad4e6;
  --accent-subtle:    #122c33;

  --success:          #4ec98a;
  --success-subtle:   #12291d;
  --warning:          #e0aa4d;
  --warning-subtle:   #2b2314;
  --danger:           #f28b82;
  --danger-subtle:    #2e1917;
  --info:             #7cb2f0;
  --info-subtle:      #16232f;

  --moq:              #9aa5b1;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .4);
  --shadow:     0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg:  0 14px 36px rgba(0, 0, 0, .55);
  --ring:       0 0 0 3px rgba(79, 195, 217, .35);
}