/* Theme: Makers Market (makers-market) */
/* A bold, warm editorial storefront framing independent craft and curated design through dramatic typography and high-contrast, flat grids. */

@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@layer base {
  :root {
    /* Observed neutral gray foundation rooted in physical print work. */
    --palette-neutral-100: #FAFAFA;
    --palette-neutral-150: #F9F9F9;
    --palette-neutral-200: #F4F4F4;
    --palette-neutral-250: #ECECEC;
    --palette-neutral-300: #E1E1E1;
    --palette-neutral-350: #D3D3D3;
    --palette-neutral-400: #C1C1C1;
    --palette-neutral-450: #ACACAC;
    --palette-neutral-500: #949494;
    --palette-neutral-550: #787878;
    --palette-neutral-600: #5F5F5F;
    --palette-neutral-650: #4A4A4A;
    --palette-neutral-700: #383838;
    --palette-neutral-750: #2B2B2B;
    --palette-neutral-800: #212121;
    --palette-neutral-850: #1B1B1B;
    --palette-neutral-900: #1A1A1A;
    /* The primary warm, vibrant yellow-gold of the Makers brand. */
    --palette-brand-100: #FFFAF0;
    --palette-brand-150: #FFF8EC;
    --palette-brand-200: #FFF3DF;
    --palette-brand-250: #FEECC9;
    --palette-brand-300: #FEE0AA;
    --palette-brand-350: #FDD283;
    --palette-brand-400: #FCC053;
    --palette-brand-450: #FAAC1B;
    --palette-brand-500: #CC8606;
    --palette-brand-550: #A56D04;
    --palette-brand-600: #835603;
    --palette-brand-650: #664302;
    --palette-brand-700: #4F3401;
    --palette-brand-750: #3C2701;
    --palette-brand-800: #2F1F01;
    --palette-brand-850: #271900;
    --palette-brand-900: #241800;
    /* Contrasting editorial teal accent used for specific visual highlights. */
    --palette-accent-100: #F4FCFD;
    --palette-accent-150: #F0FCFC;
    --palette-accent-200: #E5F9FA;
    --palette-accent-250: #D1F4F7;
    --palette-accent-300: #B7EEF2;
    --palette-accent-350: #94E6EC;
    --palette-accent-400: #6ADCE4;
    --palette-accent-450: #39CFDA;
    --palette-accent-500: #21A4AE;
    --palette-accent-550: #1A858C;
    --palette-accent-600: #15696F;
    --palette-accent-650: #105257;
    --palette-accent-700: #0C3F42;
    --palette-accent-750: #093033;
    --palette-accent-800: #072527;
    --palette-accent-850: #061F21;
    --palette-accent-900: #051D1E;
    --palette-danger-100: #FEF9F9;
    --palette-danger-150: #FEF7F7;
    --palette-danger-200: #FDF1F1;
    --palette-danger-250: #FCE6E6;
    --palette-danger-300: #F9D6D6;
    --palette-danger-350: #F7C3C3;
    --palette-danger-400: #F3ABAB;
    --palette-danger-450: #EE9090;
    --palette-danger-500: #E87070;
    --palette-danger-550: #E03636;
    --palette-danger-600: #C11C1C;
    --palette-danger-650: #971515;
    --palette-danger-700: #751010;
    --palette-danger-750: #5A0C0C;
    --palette-danger-800: #470909;
    --palette-danger-850: #3B0808;
    --palette-danger-900: #380707;
    --palette-warning-100: #FDFAF3;
    --palette-warning-150: #FCF9EF;
    --palette-warning-200: #FAF5E5;
    --palette-warning-250: #F6EED2;
    --palette-warning-300: #F1E4B9;
    --palette-warning-350: #EAD799;
    --palette-warning-400: #E2C771;
    --palette-warning-450: #D7B443;
    --palette-warning-500: #B39126;
    --palette-warning-550: #91761E;
    --palette-warning-600: #735D18;
    --palette-warning-650: #5A4912;
    --palette-warning-700: #45380E;
    --palette-warning-750: #352B0A;
    --palette-warning-800: #292108;
    --palette-warning-850: #221C07;
    --palette-warning-900: #201A06;
    --palette-success-100: #F2FDF6;
    --palette-success-150: #EEFDF4;
    --palette-success-200: #E2FBEB;
    --palette-success-250: #CDF9DD;
    --palette-success-300: #AFF5C9;
    --palette-success-350: #8AF0B0;
    --palette-success-400: #5CEA91;
    --palette-success-450: #27E26C;
    --palette-success-500: #17AB4E;
    --palette-success-550: #128B3F;
    --palette-success-600: #0E6E32;
    --palette-success-650: #0B5627;
    --palette-success-700: #08421E;
    --palette-success-750: #063317;
    --palette-success-800: #052712;
    --palette-success-850: #04210F;
    --palette-success-900: #041F0E;
    --palette-info-100: #F7FAFD;
    --palette-info-150: #F5F9FD;
    --palette-info-200: #EEF4FB;
    --palette-info-250: #E1EDF8;
    --palette-info-300: #D0E2F4;
    --palette-info-350: #BBD5EF;
    --palette-info-400: #A0C4E8;
    --palette-info-450: #81B0DF;
    --palette-info-500: #5E99D5;
    --palette-info-550: #327CC5;
    --palette-info-600: #27629D;
    --palette-info-650: #1E4C7B;
    --palette-info-700: #163A5E;
    --palette-info-750: #112C48;
    --palette-info-800: #0D2238;
    --palette-info-850: #0B1D2E;
    --palette-info-900: #0A1B2B;
  }

  :root {
    --radius: 0.0625rem;
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --background: #FFFFFF;
    --foreground: #000000;
    --card: #EDE9DF;
    --card-foreground: #000000;
    --popover: #FFFFFF;
    --popover-foreground: #000000;
    --primary: #000000;
    --primary-foreground: #FFFFFF;
    --secondary: var(--palette-neutral-150);
    --secondary-foreground: var(--palette-neutral-900);
    --muted: #E7E7E5;
    --muted-foreground: #545454;
    --accent: #24B2BC;
    --accent-foreground: #000000;
    --destructive: var(--palette-danger-600);
    --destructive-foreground: #FFFFFF;
    --border: #C0C0C0;
    --input: #C0C0C0;
    --ring: #000000;
    --chart-1: #F9AF26;
    --chart-2: #24B2BC;
    --chart-3: #214F7D;
    --chart-4: #D4AF37;
    --chart-5: #6B6B6B;
    --sidebar: #EDE9DF;
    --sidebar-foreground: #000000;
    --sidebar-primary: #000000;
    --sidebar-primary-foreground: #FFFFFF;
    --sidebar-accent: #24B2BC;
    --sidebar-accent-foreground: #000000;
    --sidebar-border: #C0C0C0;
    --sidebar-ring: #000000;
    --font-sans: "DM Sans", system-ui, sans-serif;
    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-mono: "Space Mono", ui-monospace, monospace;
    --text-hero: 400 11.875rem/9.5rem var(--font-display);
    --text-hero-tracking: -0.04em;
    --text-title: 400 3rem/3.4375rem var(--font-display);
    --text-heading: 400 1.125rem/1.4375rem var(--font-display);
    --text-body: 400 1rem/1.5rem var(--font-sans);
    --text-caption: 400 0.75rem/1rem var(--font-sans);
    --text-label: 400 0.6875rem/0.875rem var(--font-sans);
    --text-overline: 400 0.6875rem/0.875rem var(--font-sans);
    --text-overline-tracking: 0.05em;
    --text-overline-transform: uppercase;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --gradient-brand_wash: linear-gradient(135deg, #F9AF26 0%, #EDE9DF 100%);
  }

  .dark {
    --background: #0A0A0A;
    --foreground: #FFFFFF;
    --card: #252525;
    --card-foreground: #FFFFFF;
    --popover: #0A0A0A;
    --popover-foreground: #FFFFFF;
    --primary: #F9AF26;
    --primary-foreground: #000000;
    --secondary: var(--palette-neutral-800);
    --secondary-foreground: var(--palette-neutral-100);
    --muted: #404040;
    --muted-foreground: #ACACAC;
    --accent: #24B2BC;
    --accent-foreground: #000000;
    --destructive: var(--palette-danger-500);
    --destructive-foreground: #000000;
    --border: #404040;
    --input: #404040;
    --ring: #F9AF26;
    --chart-1: #F9AF26;
    --chart-2: #24B2BC;
    --chart-3: #214F7D;
    --chart-4: #D4AF37;
    --chart-5: #ACACAC;
    --sidebar: #0A0A0A;
    --sidebar-foreground: #E7E7E5;
    --sidebar-primary: #F9AF26;
    --sidebar-primary-foreground: #000000;
    --sidebar-accent: #24B2BC;
    --sidebar-accent-foreground: #000000;
    --sidebar-border: #404040;
    --sidebar-ring: #F9AF26;
  }
}

@layer base {
  * { border-color: var(--border); }
  body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); }
}

@layer components {
  .text-hero {
    font: var(--text-hero);
    letter-spacing: var(--text-hero-tracking);
  }
  .text-title {
    font: var(--text-title);
  }
  .text-heading {
    font: var(--text-heading);
  }
  .text-body {
    font: var(--text-body);
  }
  .text-caption {
    font: var(--text-caption);
  }
  .text-label {
    font: var(--text-label);
  }
  .text-overline {
    font: var(--text-overline);
    letter-spacing: var(--text-overline-tracking);
    text-transform: var(--text-overline-transform);
  }
}