/* sandbar brand tokens
 *
 * Light ramp is Grok's "Sand" palette, unchanged except where a pairing failed
 * WCAG AA. Dark ramp is derived from the same hues so both modes read as one
 * brand rather than two themes.
 *
 * Every value below was checked with a contrast calculator. Ratios are noted so
 * the next person does not have to re-derive them. Do not swap a colour into a
 * different role without re-checking — several of these pass in one role and
 * fail in another.
 */

:root {
  /* --- surfaces, light --- */
  --sb-bg:        #FAF5EC;  /* Shell    page background */
  --sb-surface:   #F2E8D5;  /* Foam     cards, raised panels */
  --sb-border:    #E9D5B0;  /* Sand     hairlines, dividers */
  --sb-soft:      #DDBE8F;  /* Dune     soft fills, chips */

  /* --- brand accents, light --- */
  --sb-accent:        #C99A5B;  /* Amber  primary action FILL */
  --sb-accent-strong: #A9763F;  /* Clay   hover, deep accent FILL */

  /* --- text, light --- */
  --sb-text:        #3B2C1B;  /* Espresso on Shell  12.38:1 */
  --sb-text-muted:  #6B5A48;  /*                     6.08:1 */
  --sb-on-accent:   #3B2C1B;  /* on Amber            5.29:1
                                 NOT white — white on Amber is 2.54:1 */

  /* Text-safe variants. The raw brand colours are too light for text on Shell:
     Amber is 2.34:1 and Clay is 3.61:1. Use these when the colour must be read,
     and the raw ones above when it is only a fill. */
  --sb-link:          #517871;  /* Tide darkened   4.52:1 */
  --sb-accent-text:   #936737;  /* Clay darkened   4.57:1 */

  /* --- gradient: Dune Drift --- */
  --sb-gradient: linear-gradient(
    90deg, #FAF5EC 0%, #E9D5B0 25%, #DDBE8F 50%, #C99A5B 75%, #A9763F 100%
  );
  /* Full-bleed version for large surfaces — runs all the way to Espresso. */
  --sb-gradient-deep: linear-gradient(
    135deg, #FAF5EC 0%, #F2E8D5 20%, #E9D5B0 40%,
            #C99A5B 65%, #A9763F 85%, #3B2C1B 100%
  );

  --sb-radius:      12px;
  --sb-radius-lg:   20px;
  --sb-radius-pill: 999px;

  /* Layout constants from the reference build. */
  --sb-container:     1120px;
  --sb-header-height: 72px;
  --sb-section-y:     100px;

  /* Translucent sticky header. The rgba is Shell at 85%. */
  --sb-header-bg:     rgba(250, 245, 236, 0.85);
  --sb-header-blur:   blur(12px);

  /* Hover physics — shared so cards and buttons move alike. */
  --sb-lift-card:   translateY(-4px);
  --sb-lift-button: translateY(-1px);
  --sb-shadow-card: 0 16px 40px rgba(59, 44, 27, 0.08);
  --sb-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --sb-font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark ramp. Applies on system preference, or force it with class="dark". */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --sb-header-bg: rgba(23, 18, 12, 0.85);
    --sb-bg:        #17120C;  /* deep espresso, deliberately not black */
    --sb-surface:   #221A11;
    --sb-border:    #4B3D2A;  /* 1.77:1 on bg — visible without glowing */
    --sb-soft:      #33281B;

    --sb-accent:        #DDBE8F;  /* Dune reads as the action colour on dark */
    --sb-accent-strong: #E9D5B0;

    --sb-text:        #FAF5EC;  /* 17.14:1 */
    --sb-text-muted:  #B9A88E;  /*  8.03:1 */
    --sb-on-accent:   #17120C;  /* 10.49:1 */

    --sb-link:        #8FB8B0;  /*  8.55:1 */
    --sb-accent-text: #DDBE8F;  /* 10.49:1 */

    --sb-gradient: linear-gradient(
      90deg, #17120C 0%, #33281B 30%, #6B5029 60%, #A9763F 85%, #C99A5B 100%
    );
  }
}

.dark {
  --sb-header-bg: rgba(23, 18, 12, 0.85);
  --sb-bg:        #17120C;
  --sb-surface:   #221A11;
  --sb-border:    #4B3D2A;
  --sb-soft:      #33281B;
  --sb-accent:        #DDBE8F;
  --sb-accent-strong: #E9D5B0;
  --sb-text:        #FAF5EC;
  --sb-text-muted:  #B9A88E;
  --sb-on-accent:   #17120C;
  --sb-link:        #8FB8B0;
  --sb-accent-text: #DDBE8F;
  --sb-gradient: linear-gradient(
    90deg, #17120C 0%, #33281B 30%, #6B5029 60%, #A9763F 85%, #C99A5B 100%
  );
}