/* =====================================================================
   M ArtWall Design System — colors + typography tokens
   ---------------------------------------------------------------------
   Single source of truth for color, type, radii, container, and spacing
   tokens for the M ArtWall brand. Mirrors react/globals.css from the
   original Relume export.

   Theme: light (with multiple inverted color "schemes" — see bottom).
   Headings:  Sora 700
   Body:      Inter 400
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Fonts (local woff2 — do NOT load Google Fonts CDN)
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sora-400.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/sora-500.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sora-600.woff2") format("woff2");
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sora-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700.woff2") format("woff2");
}

/* ---------------------------------------------------------------------
   2. Base color tokens
   ---------------------------------------------------------------------
   Neutral runs lightest → darkest (counter-intuitively, --neutral-lightest
   is the near-white #f2f2f2). White is full white. Each chromatic palette
   has 7 shades (lightest → darkest).
   --------------------------------------------------------------------- */
:root {
  --color-white: #ffffff;

  --color-neutral-lightest: #f2f2f2;
  --color-neutral-lighter:  #dadad9;
  --color-neutral-light:    #b5b5b4;
  --color-neutral:          #858483;
  --color-neutral-dark:     #545252;
  --color-neutral-darker:   #232120;
  --color-neutral-darkest:  #0b0908;

  /* Spectra — primary accent. Dark teal/slate. */
  --color-spectra-lightest: #eaeded;
  --color-spectra-lighter:  #d5dbdb;
  --color-spectra-light:    #6d8383;
  --color-spectra:          #2f4f4f;
  --color-spectra-dark:     #253f3f;
  --color-spectra-darker:   #121f1f;
  --color-spectra-darkest:  #0e1717;

  /* Potters Clay — warm bronze / mustard. */
  --color-potters-clay-lightest: #f3f0eb;
  --color-potters-clay-lighter:  #e7e2d8;
  --color-potters-clay-light:    #ad9a78;
  --color-potters-clay:          #8a6f3f;
  --color-potters-clay-dark:     #6e5832;
  --color-potters-clay-darker:   #372c19;
  --color-potters-clay-darkest:  #292112;

  /* Summer Green — soft sage. */
  --color-summer-green-lightest: #f5f8f6;
  --color-summer-green-lighter:  #ecf2ee;
  --color-summer-green-light:    #bed3c5;
  --color-summer-green:          #a3c1ad;
  --color-summer-green-dark:     #829a8a;
  --color-summer-green-darker:   #414d45;
  --color-summer-green-darkest:  #303933;

  /* Cameo — warm peach / clay. */
  --color-cameo-lightest: #fbf7f6;
  --color-cameo-lighter:  #f7f0ed;
  --color-cameo-light:    #e4cdc1;
  --color-cameo:          #d9b8a7;
  --color-cameo-dark:     #ad9385;
  --color-cameo-darker:   #564942;
  --color-cameo-darkest:  #413732;

  /* Alpha overlays (built via color-mix). */
  --color-white-5:  color-mix(in srgb, var(--color-white), transparent 95%);
  --color-white-10: color-mix(in srgb, var(--color-white), transparent 90%);
  --color-white-15: color-mix(in srgb, var(--color-white), transparent 85%);
  --color-white-20: color-mix(in srgb, var(--color-white), transparent 80%);
  --color-white-30: color-mix(in srgb, var(--color-white), transparent 70%);
  --color-white-40: color-mix(in srgb, var(--color-white), transparent 60%);
  --color-white-50: color-mix(in srgb, var(--color-white), transparent 50%);
  --color-white-60: color-mix(in srgb, var(--color-white), transparent 40%);

  --color-neutral-darkest-5:  color-mix(in srgb, var(--color-neutral-darkest), transparent 95%);
  --color-neutral-darkest-10: color-mix(in srgb, var(--color-neutral-darkest), transparent 90%);
  --color-neutral-darkest-15: color-mix(in srgb, var(--color-neutral-darkest), transparent 85%);
  --color-neutral-darkest-20: color-mix(in srgb, var(--color-neutral-darkest), transparent 80%);
  --color-neutral-darkest-30: color-mix(in srgb, var(--color-neutral-darkest), transparent 70%);
  --color-neutral-darkest-40: color-mix(in srgb, var(--color-neutral-darkest), transparent 60%);
  --color-neutral-darkest-50: color-mix(in srgb, var(--color-neutral-darkest), transparent 50%);
  --color-neutral-darkest-60: color-mix(in srgb, var(--color-neutral-darkest), transparent 40%);

  /* ---------------------------------------------------------------------
     3. Semantic foreground/background defaults
        (overridden inside any .scheme-N container)
     --------------------------------------------------------------------- */
  --scheme-background: var(--color-white);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text:       var(--color-neutral-darkest);
  --scheme-text-muted: color-mix(in srgb, var(--color-neutral-darkest), transparent 30%);
  --scheme-border:     var(--color-neutral-darkest-15);
  --scheme-accent:     var(--color-spectra);
  --scheme-btn-text:   var(--color-white);

  /* Standard one-line aliases for common product copy use. */
  --fg-1: var(--scheme-text);
  --fg-2: color-mix(in srgb, var(--scheme-text), transparent 25%);
  --fg-3: color-mix(in srgb, var(--scheme-text), transparent 50%);
  --bg-1: var(--scheme-background);
  --bg-2: var(--scheme-foreground);

  /* ---------------------------------------------------------------------
     4. Typography — base
     --------------------------------------------------------------------- */
  --font-heading: "Sora", "Noto Sans JP", system-ui, sans-serif;
  --font-body:    "Inter", "Noto Sans JP", system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;

  /* Mobile-first scale. Overridden ≥992px below. */
  --text-h1: 3rem;       /* 48px  */
  --text-h2: 2.75rem;    /* 44px  */
  --text-h3: 2rem;       /* 32px  */
  --text-h4: 1.5rem;     /* 24px  */
  --text-h5: 1.25rem;    /* 20px  */
  --text-h6: 1.125rem;   /* 18px  */
  --text-large:   1.125rem; /* 18px */
  --text-medium:  1rem;     /* 16px */
  --text-regular: 0.875rem; /* 14px */
  --text-small:   0.75rem;  /* 12px */
  --text-tiny:    0.625rem; /* 10px */

  --leading-tight: 1.1;
  --leading-snug:  1.2;
  --leading-body:  1.6;
  --tracking-h:    0.01em;

  /* ---------------------------------------------------------------------
     5. Radius / spacing / containers
     --------------------------------------------------------------------- */
  --radius-button:   0.375rem;  /* 6px  — sleek */
  --radius-card:     0.5rem;    /* 8px */
  --radius-image:    0.5rem;    /* 8px */
  --radius-badge:    0.375rem;  /* 6px */
  --radius-form:     0.375rem;  /* 6px */
  --radius-checkbox: 0.125rem;  /* 2px */
  --radius-carousel: 0.25rem;   /* 4px */

  --container-xxs: 20rem;
  --container-xs:  25rem;
  --container-sm:  30rem;
  --container-md:  35rem;
  --container-lg:  48rem;
  --container-xl:  64rem;
  --container-xxl: 80rem;  /* canonical max-width — used by .container */

  /* Section vertical rhythm. The codebase uses py-16 / md:py-24 / lg:py-28
     for nearly every section. */
  --section-y-sm: 4rem;    /* 64px  — base, mobile */
  --section-y-md: 6rem;    /* 96px  */
  --section-y-lg: 7rem;    /* 112px — desktop default */

  --spacing-18: 4.5rem;
  --spacing-30: 7.5rem;

  /* Horizontal page padding — always 5% per Relume convention. */
  --page-padding-x: 5%;
}

@media (min-width: 992px) {
  :root {
    --text-h1: 5.25rem;   /* 84px */
    --text-h2: 3.75rem;   /* 60px */
    --text-h3: 3rem;      /* 48px */
    --text-h4: 2.5rem;    /* 40px */
    --text-h5: 2rem;      /* 32px */
    --text-h6: 1.625rem;  /* 26px */
    --text-large:   1.625rem;  /* 26px */
    --text-medium:  1.25rem;   /* 20px */
    --text-regular: 1.125rem;  /* 18px */
    --text-small:   1rem;      /* 16px */
    --text-tiny:    0.75rem;   /* 12px */
  }
}

/* ---------------------------------------------------------------------
   6. Semantic element styles
   --------------------------------------------------------------------- */
html, body { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-1); }
body { font-size: var(--text-regular); line-height: var(--leading-body); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-h);
  margin: 0;
}
h1 { font-size: var(--text-h1); line-height: var(--leading-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); }
h4 { font-size: var(--text-h4); line-height: var(--leading-snug); }
h5 { font-size: var(--text-h5); line-height: var(--leading-snug); }
h6 { font-size: var(--text-h6); line-height: var(--leading-snug); }

p  { margin: 0; line-height: var(--leading-body); }

a  { color: inherit; text-decoration: none; }
a.underline,
.prose a { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp, pre {
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.9em;
}

/* Utility text classes. */
.text-large   { font-size: var(--text-large);   line-height: var(--leading-body); }
.text-medium  { font-size: var(--text-medium);  line-height: var(--leading-body); }
.text-regular { font-size: var(--text-regular); line-height: var(--leading-body); }
.text-small   { font-size: var(--text-small);   line-height: var(--leading-body); }
.text-tiny    { font-size: var(--text-tiny);    line-height: var(--leading-body); }

/* Eyebrow / overline — common pattern before headings. */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-regular);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------------------
   7. Color schemes (.scheme-1 ... .scheme-5)
   ---------------------------------------------------------------------
   Apply on any section. All descendants pick up text + border colors
   automatically. Matches the @utility blocks in react/globals.css.
   --------------------------------------------------------------------- */
.scheme-1 {
  --scheme-background: var(--color-white);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text:       var(--color-neutral-darkest);
  --scheme-border:     var(--color-neutral-darkest-15);
  --scheme-accent:     var(--color-spectra);
  --scheme-btn-text:   var(--color-white);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-2 {
  /* Off-black — used for footer / dark CTA sections. */
  --scheme-background: var(--color-neutral-darkest);
  --scheme-foreground: var(--color-neutral-darker);
  --scheme-text:       var(--color-white);
  --scheme-border:     var(--color-white-20);
  --scheme-accent:     var(--color-white);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-3 {
  /* Neutral-darker — dark sections with slightly lighter tone than scheme-2. */
  --scheme-background: var(--color-neutral-darker);
  --scheme-foreground: var(--color-neutral-darkest);
  --scheme-text:       var(--color-white);
  --scheme-border:     var(--color-white-20);
  --scheme-accent:     var(--color-white);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-4 {
  /* Neutral-lighter — light grey accent section (introductions / FAQ etc). */
  --scheme-background: var(--color-neutral-lighter);
  --scheme-foreground: var(--color-neutral-lightest);
  --scheme-text:       var(--color-neutral-darkest);
  --scheme-border:     var(--color-neutral-darkest-15);
  --scheme-accent:     var(--color-spectra);
  --scheme-btn-text:   var(--color-white);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-5 {
  /* Spectra-darker — brand-coloured dark section (hero / footer accent). */
  --scheme-background: var(--color-spectra-darker);
  --scheme-foreground: var(--color-spectra-darkest);
  --scheme-text:       var(--color-white);
  --scheme-border:     var(--color-white-20);
  --scheme-accent:     var(--color-white);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

.scheme-6 {
  /* Summer-green-lighter — soft sage accent section. */
  --scheme-background: var(--color-summer-green-lighter);
  --scheme-foreground: var(--color-summer-green-lightest);
  --scheme-text:       var(--color-neutral-darkest);
  --scheme-border:     var(--color-neutral-darkest-15);
  --scheme-accent:     var(--color-spectra);
  --scheme-btn-text:   var(--color-white);
  background-color: var(--scheme-background);
  color: var(--scheme-text);
}

/* ---------------------------------------------------------------------
   8. Useful utilities
   --------------------------------------------------------------------- */
.container { max-width: var(--container-xxl); margin-inline: auto; }
.page-px  { padding-left: var(--page-padding-x); padding-right: var(--page-padding-x); }
.section-y {
  padding-top:    var(--section-y-sm);
  padding-bottom: var(--section-y-sm);
}
@media (min-width: 768px) {
  .section-y { padding-top: var(--section-y-md); padding-bottom: var(--section-y-md); }
}
@media (min-width: 992px) {
  .section-y { padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }
}