/*
 * Noria design tokens (noria-specs/docs/design-spec.md). The palette is consolidated as D-002 records; text colours are
 * darkened where the mock fails 4.5:1 (D-004). Ratios measured with the WCAG 2 formula.
 *
 *   ink #282828 on sand #E5D5CC ............ 10.3:1   body text
 *   gold-text #7A5730 on sand .............. 4.55:1   gold text on the page (mock #AD8453: 2.37:1)
 *   brown #2E221B on gold #B78E5D .......... 5.17:1   text on gold buttons (mock #3C2D25: 4.42:1)
 *   sand on green #424C3D .................. 6.31:1   brand band, sticky header, add to cart, labels
 *   gold-on-dark #D9B88C on green .......... 4.79:1   active nav on the green bar and in the mobile menu
 *   gold #B78E5D on ink #282828 ............ 4.94:1   accents in the footer
 *   ink-muted #4A4440 on sand .............. 6.72:1   secondary text
 *   error #A12728 / success #006B2B / warning #6E5100 on sand: 5.19 / 4.69 / 5.18:1
 *   the same three on sand-light #ECE6E2 (notices): 5.99 / 5.41 / 5.98:1
 *
 * The fonts live in public/fonts/noria with their licences, not under app/: the core guard
 * spec/guard/banned_dependencies_spec.rb reads every file under app/ as text.
 */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/noria/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/noria/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/noria/montserrat-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/noria/montserrat-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/noria/ClashDisplay-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/noria/ClashDisplay-Semibold.woff2") format("woff2");
}

@layer tokens {
  body.storefront {
    /* Palette */
    --noria-sand: #e5d5cc;
    --noria-sand-light: #ece6e2;
    --noria-sand-deep: #d8c5ba;      /* image placeholders: sand-tinted box (build-rules) */
    --noria-ink: #282828;
    --noria-ink-muted: #4a4440;
    --noria-brown: #2e221b;
    --noria-gold: #b78e5d;
    --noria-gold-text: #7a5730;
    --noria-gold-on-dark: #d9b88c;
    --noria-green: #424c3d;
    --noria-green-deep: #343c30;

    /* Type */
    --font-sans: "Montserrat", system-ui, sans-serif;
    --font-display: "Clash Display", "Montserrat", system-ui, sans-serif;
    --noria-track-nav: 0.13em;
    --noria-track-heading: 0.12em;
    --noria-track-body: 0.03em;

    /* Type scale, desktop (D-001); phones override below */
    --noria-text-hero: clamp(3rem, 5.4vw, 4.875rem); /* 78 at 1440 */
    --noria-text-contact: 2.5rem;     /* 40 */
    --noria-text-newsletter: 2.0625rem; /* 33 */
    --noria-text-manifesto: 1.75rem;  /* 28 */
    --noria-text-heading: 1.75rem;    /* 28 */
    --noria-text-title: 1.5rem;       /* 24 */
    --noria-text-benefit: 1.375rem;   /* 22 */
    --noria-text-price: 1.25rem;      /* 20 */
    --noria-text-lead: 1.125rem;      /* 18 */
    --noria-text-button: 1.125rem;    /* 18 */
    --noria-text-label: 1.0625rem;    /* 17: tile labels */
    --noria-text-body: 1rem;          /* 16 */
    --noria-text-small: 0.875rem;     /* 14 */
    --noria-text-form-label: 0.8125rem; /* 13 */

    /* Layout */
    --noria-page: 90rem;              /* 1440 */
    --noria-gutter: clamp(1.875rem, 5.2vw, 4.6875rem); /* 30 on phones, 75 at 1440 */
    --noria-edge: clamp(1.875rem, 3.7vw, 3.3125rem);    /* 53 at 1440: logo, breadcrumb */
    --noria-text-column: 58.125rem;   /* 930 */
    --noria-wide-column: 80.625rem;   /* 1290 */
    --noria-section-gap: clamp(4rem, 8vw, 7.5rem);
    --noria-header-height: 5.5rem;

    /* Shared semantic tokens the core components read */
    --color-bg: var(--noria-sand);
    --color-surface: var(--noria-sand-light);
    --color-surface-muted: var(--noria-sand-deep);
    --color-text: var(--noria-ink);
    --color-text-muted: var(--noria-ink-muted);
    --color-border: #c8b3a6;
    --color-border-strong: var(--noria-ink);
    --color-primary: var(--noria-green);
    --color-primary-hover: var(--noria-green-deep);
    --color-on-primary: var(--noria-sand);
    --color-focus: var(--noria-ink);
    --color-success-text: #006b2b;
    --color-warning-text: #6e5100;
    --color-error-text: #a12728;
    --color-success-bg: var(--noria-sand-light);
    --color-success-border: #006b2b;
    --color-error-bg: var(--noria-sand-light);
    --color-error-border: #a12728;
    --color-warning-bg: var(--noria-sand-light);
    --color-warning-border: #6e5100;
    --color-info-bg: var(--noria-sand-light);
    --color-info-border: var(--noria-green);
    --color-backdrop: rgb(40 40 40 / 0.55);
    --radius-sm: 0;
    --radius-md: 0;

    background: var(--noria-sand);
    color: var(--noria-ink);
    font-family: var(--font-sans);
  }

  @media (max-width: 47.99rem) {
    body.storefront {
      --noria-text-hero: 3rem;        /* 48 */
      --noria-text-contact: 2rem;
      --noria-text-newsletter: 1.5rem;
      --noria-text-manifesto: 1.25rem;
      --noria-text-heading: 1.5rem;
      --noria-text-title: 1.375rem;
      --noria-text-benefit: 1.25rem;
      --noria-text-lead: 0.8125rem;   /* 13: mock 11, raised (D-003) */
      --noria-text-label: 0.8125rem;  /* 13 */
      --noria-text-form-label: 0.75rem; /* 12: mock 11, raised (D-003) */
      --noria-header-height: 4.5rem;
    }
  }
}