/* ==========================================================================
   String Frame — Design tokens
   "Modern gallery pop". Every colour, font, radius and spacing value in the
   build resolves to a custom property declared here, so the later port to
   Bricks global styles is a one-to-one mapping.
   ========================================================================== */

:root {

  /* --- Surfaces ---------------------------------------------------------- */
  --paper:              #FAFAFA;   /* page background                        */
  --white:              #FFFFFF;   /* card surfaces                          */
  --surface:            #EFEFF3;   /* quiet bands, image placeholders        */
  --cobalt-tint:        #E4E7F7;   /* image beds, selected states            */
  --photo-wall:         #F6EAE0;   /* UNUSED since 12 Sep 2026. Was the cream
                                      behind the configurator teaser's compare
                                      panes, matched to the wall in the old
                                      product photography. Those panes are now
                                      transparent: the current pictures are
                                      framed renders on white, so the cream read
                                      as a band of colour the section did not
                                      otherwise have. Kept in case wall-shot
                                      photography returns.                    */

  /* --- Ink --------------------------------------------------------------- */
  --ink:                #17171B;   /* text, borders, footer, video blocks    */
  --ink-raised:         #1F1F25;   /* video block interior                   */
  --ink-rule:           #35353C;   /* rules on ink backgrounds               */

  /* --- Accents ----------------------------------------------------------- */
  --cobalt:             #2743F0;   /* primary: buttons, prices, links, motif */
  --cobalt-hover:       #1E35C9;
  --cobalt-active:      #152AA6;
  --cobalt-soft:        #8A9BFF;   /* eyebrow on ink backgrounds             */
  --coral:              #FF5A48;   /* spark accent — max one per screen      */

  /* --- Badges ------------------------------------------------------------ */
  --badge-bg:           #FFE3DF;
  --badge-ink:          #8C2A1F;
  --badge-alt-bg:       #E4E7F7;
  --badge-alt-ink:      #17234F;

  /* --- Text -------------------------------------------------------------- */
  --text:               #17171B;
  --text-muted:         #55555E;   /* sublines                               */
  --text-caption:       #6C6C74;   /* meta, captions                         */
  --text-on-ink:        #FAFAFA;
  --text-on-ink-muted:  #C9C9D1;
  --text-on-ink-cap:    #9A9AA3;

  /* --- Rules ------------------------------------------------------------- */
  --rule:               #17171B;   /* the structural 1.5px ink rule          */
  --rule-soft:          #DCDDE4;   /* inner table dividers                   */
  --rule-hair:          #E2E2E8;   /* style-guide specimen dividers          */
  --track:              #3A3A43;   /* progress bar track on ink              */

  /* --- Disabled ---------------------------------------------------------- */
  --disabled-bg:        #DCDDE4;
  --disabled-ink:       #92929B;
  --disabled-border:    #C9CAD2;
  --disabled-outline:   #A5A5AE;

  /* --- Type families ----------------------------------------------------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Geometry (non-negotiable) ----------------------------------------- */
  --radius:     6px;    /* buttons, inputs, cards      */
  --radius-sm:  4px;    /* badges, thumbnails, chips   */
  --bw:         1.5px;  /* the ink border weight       */

  /* --- Layout ------------------------------------------------------------ *
   * The design was drawn on a 1440px canvas. Section backgrounds, rules and
   * the footer run full-bleed to the viewport edge; the content column stays
   * capped at the canvas width and centred, so a maximised window shows no
   * empty margins but the layout still matches the mockups exactly.         */
  --canvas-max:  1440px;                    /* the design canvas            */
  --content-max: 1320px;                    /* canvas minus 2 x 60px gutter */
  --gutter:      20px;                      /* minimum horizontal padding   */
  --pad-x:       max(var(--gutter), calc((100% - var(--content-max)) / 2));
  --bleed:       max(0px, calc((100% - var(--canvas-max)) / 2));
  --pt:          40px;  /* section padding-top,    overridden per section    */
  --pb:          40px;  /* section padding-bottom, overridden per section    */

  /* --- Display type scaling ---------------------------------------------- *
   * Desktop values in the design are exact. Rather than restate every size
   * per breakpoint, display sizes are multiplied by these factors, which
   * resolve to 1 at the 1200px+ breakpoint where the design was drawn.      */
  --ds-xl: .60;   /* 44px and larger  */
  --ds-lg: .78;   /* 26px – 40px      */

  /* --- Motion ------------------------------------------------------------ */
  --ease:  cubic-bezier(.2, .6, .3, 1);
  --speed: 140ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 40px;
    --pt: 56px;
    --pb: 56px;
    --ds-xl: .80;
    --ds-lg: .90;
  }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 60px;
    --pt: 72px;
    --pb: 72px;
    --ds-xl: 1;
    --ds-lg: 1;
  }
}