/*
  ----------------------------------------
  Theme - Utility classes
  ----------------------------------------
*/

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Lora:wght@400;700&display=swap");

:root {
    /* Fonts */
    --font-body: "General Sans", system-ui, sans-serif;
    /* --font-heading: "Lora", Georgia, serif; */
    --font-heading: "General Sans", system-ui, sans-serif;
    --font-normal: 400;
    --font-semibold: 500;
    --font-bold: 700;

    /* Brand Colors – Impeccable Plate */
    /* https://www.figma.com/design/y2zRG99qxnkDDtvok1xl7e/Impeccable-Plate?node-id=50-352&t=uw08kZplaeT4rQ3B-0 */
    --brand-1: #18694d; /* Primary (color/primary/700) */
    --brand-1-light: #23956a; /* Primary (color/primary/500) */
    --brand-1-darker: #0B3A2C; /* Primary (color/primary/900) */
    --brand-2: #1a1918; /* Near Black */
    --brand-2-light: #6d6c6a; /* Warm Gray */
    --brand-3: #d89575; /* Terracotta/Coral */
    --brand-3-light: #fdebd6; /* Terracotta light */
    --brand-4: #f5f4f1; /* Warm Cream */
    --brand-4-light: #ffffff; /* White */

    /* Neutral Colors */
    --black: oklch(14.1% 0.005 285.823); /* Zinc 950 */
    --darker: oklch(27.4% 0.006 286.033); /* Zinc 800 */
    --dark: oklch(37% 0.013 285.805); /* Zinc 700 */
    --midtone: oklch(55.2% 0.016 285.938); /* Zinc 500 */
    --light: oklch(87.1% 0.006 286.286); /* Zinc 300 */
    --lighter: oklch(96.7% 0.001 286.375); /* Zinc 100 */
    --white: white;
    --neutral-50: #f4f7f6;
    --neutral-100: #e6ecea;
    --neutral-200: #d2dbd8;
    --neutral-300: #b8c5c1;
    --neutral-400: #8fa19b;
    --neutral-500: #526560;
    --neutral-600: #485a55;
    --neutral-700: #3d4e49;
    --neutral-800: #2a3834;
    --neutral-900: #182320;
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --text-muted: var(--neutral-500);

    /* Semantic Colors */
    --success: #23956a; /* Green 600 */
    --success-light: oklch(96.2% 0.044 156.743); /* Green 100 */
    --info: oklch(54.6% 0.245 262.881); /* Blue 600 */
    --info-light: oklch(93.2% 0.032 255.585); /* Blue 100 */
    --warning: oklch(64.6% 0.222 41.116); /* Orange 600 */
    --warning-light: oklch(95.4% 0.038 75.164); /* Orange 100 */
    --error: oklch(50.5% 0.213 27.518); /* Red 700 */
    --error-light: oklch(93.6% 0.032 17.717); /* Red 100 */
    --link: oklch(54.6% 0.245 262.881); /* Blue 600 */
    --highlight: oklch(94.5% 0.129 101.54); /* Yellow 200 */

    --subtle-border: var(--neutral-200);

    /* Kitchen Status Colors */
    --status-lunch: #e93578;
    --status-dinner: #8a76e6;

    /* Border & Outline Widths */
    --border: 1px;
    --border-sm: 0.5px;
    --border-lg: 2px;

    /* Border Radius */
    --rounded: 0.5rem;
    --rounded-sm: 0.25rem;
    --rounded-lg: 0.75rem;
    --rounded-full: 999rem;

    /* Shadow */
    --shadow: 0 4px 4px 1px rgb(0 0 0 / 0.15), 0 2px 4px -2px rgb(0 0 0 / 0.25);
    --shadow-sm:
        0 2px 3px -0.5px rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-lg:
        0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    --shadow-top-lg: 0 -1px 80rem -1px rgb(0 0 0 / 0.1);

    /* Width Constraints */
    --max-w-text: 80ch;
    --max-w-form: 40rem;

    /* Container */
    --container-max: 1400px;
    --container-padding: 0 var(--space-lg);

    /* Fluid Text Scale – Generated with: `npx prewindcss text`
       Min viewport: 320px
       Max viewport: 1600px
       Min base size: 16px
       Max base size: 18px
       Min ratio: 1.25 - Major Third
       Max ratio: 1.414 - Augmented Fourth
    */

    --text-2xs: clamp(
        0.512rem,
        0.5405rem + -0.1426vw,
        0.3979rem
    ); /* ~6.4px → ~8.2px */
    --text-xs: clamp(
        0.64rem,
        0.6593rem + -0.09666vw,
        0.5627rem
    ); /* ~9.0px → ~10.2px */
    --text-sm: clamp(
        0.8rem,
        0.8011rem + -0.005481vw,
        0.7956rem
    ); /* ~12.7px → ~12.8px */
    --text-base: clamp(1rem, 0.9688rem + 0.1563vw, 1.125rem); /* 16px → 18px */
    --text-lg: clamp(
        1.25rem,
        1.165rem + 0.4259vw,
        1.591rem
    ); /* 20px → ~25.5px */
    --text-xl: clamp(
        1.563rem,
        1.391rem + 0.8585vw,
        2.249rem
    ); /* ~25.0px → ~36.0px */
    --text-2xl: clamp(
        1.953rem,
        1.646rem + 1.534vw,
        3.181rem
    ); /* ~31.2px → ~50.9px */
    --text-3xl: clamp(
        2.441rem,
        1.927rem + 2.57vw,
        4.497rem
    ); /* ~39.1px → ~72.0px */
    --text-4xl: clamp(
        3.052rem,
        2.225rem + 4.134vw,
        6.359rem
    ); /* ~48.8px → ~101.7px */

    /* Fluid Space Scale – Generated with: `npx prewindcss space`
     Min viewport: 320px
     Max viewport: 1600px
     Min sm size: 12px
     Max sm size: 18px
     Min ratio: 1.5 - Perfect Fifth
     Max ratio: 1.667 - Major Sixth
  */
    --space-3xs: clamp(
        0.2222rem,
        0.2171rem + 0.02579vw,
        0.2429rem
    ); /* ~3.6px → ~3.9px */
    --space-2xs: clamp(
        0.3333rem,
        0.3155rem + 0.08938vw,
        0.4048rem
    ); /* ~5.3px → ~6.5px */
    --space-xs: clamp(
        0.5rem,
        0.4563rem + 0.2186vw,
        0.6749rem
    ); /* 8px → ~10.8px */
    --space-sm: clamp(
        0.75rem,
        0.6563rem + 0.4688vw,
        1.125rem
    ); /* 12px → 18px */
    --space-md: clamp(
        1.125rem,
        0.9374rem + 0.938vw,
        1.875rem
    ); /* 18px → 30px */
    --space-lg: clamp(
        1.688rem,
        1.328rem + 1.798vw,
        3.126rem
    ); /* ~27px → ~50px */
    --space-xl: clamp(
        2.531rem,
        1.861rem + 3.35vw,
        5.211rem
    ); /* ~40px → ~83px */
    --space-2xl: clamp(
        3.797rem,
        2.574rem + 6.113vw,
        8.688rem
    ); /* ~61px → ~139px */
    --space-3xl: clamp(
        5.695rem,
        3.499rem + 10.98vw,
        14.48rem
    ); /* ~91px → ~232px */
    --space-4xl: clamp(
        8.543rem,
        4.643rem + 19.5vw,
        24.14rem
    ); /* ~137px → ~386px */
}

/*
    Text Scale Quick Reference:
    --text-2xs:   ~6.4px  → ~8.2px
    --text-xs:    ~9.0px  → ~10.2px
    --text-sm:    ~12.7px → ~12.8px
    --text-base:   16px   →  18px
    --text-lg:     20px   → ~25.5px
    --text-xl:    ~25px   → ~36px
    --text-2xl:   ~31px   → ~51px
    --text-3xl:   ~39px   → ~72px
    --text-4xl:   ~49px   → ~102px
*/

/*
    Space Scale Quick Reference:
    --space-3xs:  ~3.6px  → ~3.9px
    --space-2xs:  ~5.3px  → ~6.5px
    --space-xs:    8px    → ~10.8px
    --space-sm:    12px   →  18px
    --space-md:    18px   →  30px
    --space-lg:   ~27px   → ~50px
    --space-xl:   ~40px   → ~83px
    --space-2xl:  ~61px   → ~139px
    --space-3xl:  ~91px   → ~232px
    --space-4xl: ~137px   → ~386px
*/