/* ==========================================================================
   Infinite Craftworks — Global Design System (theme.css)
   --------------------------------------------------------------------------
   Consolidated design tokens extracted from the three design-canvas screens.
   All three source documents shared one identical token set; it is captured
   here once as native CSS custom properties inside :root.

   Sections:
     1. Color tokens
     2. Stray / arbitrary hex values (used as Tailwind arbitrary classes)
     3. Spacing scale
     4. Border radius scale
     5. Typography — font families
     6. Typography — type scale (size / line-height / weight / tracking)
     7. Elevation (shadows)
     8. Base element styles
     9. Custom utility & component classes
    10. Material Symbols icon helpers
    11. Media background helper classes (replace stripped inline styles)
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       1. COLOR TOKENS
       ---------------------------------------------------------------------- */
    --color-primary: #56642b;
    --color-on-primary: #ffffff;
    --color-primary-container: #8a9a5b;
    --color-on-primary-container: #253000;
    --color-primary-fixed: #d9eaa3;
    --color-primary-fixed-dim: #bdce89;
    --color-on-primary-fixed: #161f00;
    --color-on-primary-fixed-variant: #3e4c16;
    --color-inverse-primary: #bdce89;

    --color-secondary: #735c00;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fed65b;
    --color-on-secondary-container: #745c00;
    --color-secondary-fixed: #ffe088;
    --color-secondary-fixed-dim: #e9c349;
    --color-on-secondary-fixed: #241a00;
    --color-on-secondary-fixed-variant: #574500;

    --color-tertiary: #655d57;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #9b928b;
    --color-on-tertiary-container: #312b26;
    --color-tertiary-fixed: #ece0d8;
    --color-tertiary-fixed-dim: #d0c4bd;
    --color-on-tertiary-fixed: #201b16;
    --color-on-tertiary-fixed-variant: #4d4540;

    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;

    --color-background: #faf9f6;
    --color-on-background: #1a1c1a;

    --color-surface: #faf9f6;
    --color-on-surface: #1a1c1a;
    --color-surface-variant: #e3e2e0;
    --color-on-surface-variant: #46483c;
    --color-surface-bright: #faf9f6;
    --color-surface-dim: #dbdad7;
    --color-surface-tint: #56642b;

    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f4f3f1;
    --color-surface-container: #efeeeb;
    --color-surface-container-high: #e9e8e5;
    --color-surface-container-highest: #e3e2e0;

    --color-inverse-surface: #2f312f;
    --color-inverse-on-surface: #f2f1ee;

    --color-outline: #76786b;
    --color-outline-variant: #c6c8b8;

    /* ----------------------------------------------------------------------
       2. STRAY / ARBITRARY HEX VALUES
       Hardcoded colors used directly in markup (Tailwind arbitrary classes)
       rather than via the token palette. Captured here for consolidation.
       ---------------------------------------------------------------------- */
    --color-shadow-rgb: 44, 38, 33;          /* #2C2621 — ambient shadow base  */
    --color-shadow: #2c2621;                  /* material tag text / shadow tint */
    --color-tag-surface: #f2f4ed;             /* #F2F4ED — material chip bg      */
    --color-card-border: #e0e4d5;             /* #E0E4D5 — product card border   */
    --color-scrim: #1a1c1a;                   /* gradient scrim base             */

    /* ----------------------------------------------------------------------
       3. SPACING SCALE
       ---------------------------------------------------------------------- */
    --space-unit: 8px;
    --space-stack-sm: 12px;
    --space-stack-md: 24px;
    --space-stack-lg: 48px;
    --space-gutter: 24px;
    --space-margin-mobile: 20px;
    --space-margin-desktop: 64px;
    --size-container-max: 1280px;

    /* ----------------------------------------------------------------------
       4. BORDER RADIUS SCALE
       ---------------------------------------------------------------------- */
    --radius-default: 0.125rem;   /* 2px  */
    --radius-lg: 0.25rem;         /* 4px  */
    --radius-xl: 0.5rem;          /* 8px  */
    --radius-full: 0.75rem;       /* 12px */

    /* ----------------------------------------------------------------------
       5. TYPOGRAPHY — FONT FAMILIES
       ---------------------------------------------------------------------- */
    --font-display: "Playfair Display", serif;   /* display-lg, display-lg-mobile */
    --font-headline: "Playfair Display", serif;  /* headline-md, headline-sm      */
    --font-body: "Inter", sans-serif;            /* body-lg/md/sm, label-caps     */

    /* ----------------------------------------------------------------------
       6. TYPOGRAPHY — TYPE SCALE
       ---------------------------------------------------------------------- */
    --text-display-lg-size: 48px;
    --text-display-lg-line: 1.2;
    --text-display-lg-weight: 700;
    --text-display-lg-tracking: -0.01em;

    --text-display-lg-mobile-size: 36px;
    --text-display-lg-mobile-line: 1.2;
    --text-display-lg-mobile-weight: 700;

    --text-headline-md-size: 32px;
    --text-headline-md-line: 1.3;
    --text-headline-md-weight: 600;

    --text-headline-sm-size: 24px;
    --text-headline-sm-line: 1.4;
    --text-headline-sm-weight: 600;

    --text-body-lg-size: 18px;
    --text-body-lg-line: 1.6;
    --text-body-lg-weight: 400;

    --text-body-md-size: 16px;
    --text-body-md-line: 1.6;
    --text-body-md-weight: 400;

    --text-body-sm-size: 14px;
    --text-body-sm-line: 1.5;
    --text-body-sm-weight: 400;

    --text-label-caps-size: 12px;
    --text-label-caps-line: 1;
    --text-label-caps-weight: 600;
    --text-label-caps-tracking: 0.1em;

    /* ----------------------------------------------------------------------
       7. ELEVATION
       ---------------------------------------------------------------------- */
    --shadow-ambient: 0 4px 20px rgba(var(--color-shadow-rgb), 0.04);
    --shadow-ambient-soft: 0 10px 20px -5px rgba(var(--color-shadow-rgb), 0.04);
}

/* ==========================================================================
   8. BASE ELEMENT STYLES
   ========================================================================== */
body {
    background-color: var(--color-background);
    color: var(--color-on-background);
}

/* ==========================================================================
   9. CUSTOM UTILITY & COMPONENT CLASSES
   (lifted from the inline <style> blocks of the source screens)
   ========================================================================== */

/* Ambient elevation. `.shadow-ambient` is the alias used by screens 2 & 3. */
.ambient-shadow,
.shadow-ambient {
    box-shadow: var(--shadow-ambient);
}

/* Screen 3 uses a softer, larger-offset ambient shadow. */
.shadow-ambient-soft {
    box-shadow: var(--shadow-ambient-soft);
}

/* Animated bottom underline that wipes in on hover (screen 2). */
.text-underline-hover {
    position: relative;
}
.text-underline-hover::after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.text-underline-hover:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* ==========================================================================
   10. MATERIAL SYMBOLS ICON HELPERS
   ========================================================================== */
.material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}
/* Solid (filled) icon — replaces inline style="font-variation-settings:'FILL' 1" */
.fill-icon {
    font-variation-settings: "FILL" 1;
}
/* Explicit outline (unfilled) icon — replaces inline style="...'FILL' 0" */
.icon-unfill {
    font-variation-settings: "FILL" 0;
}

/* ==========================================================================
   11. MEDIA BACKGROUND HELPER CLASSES
   These replace the stripped inline style="background-image:url(...)"
   attributes from the source markup. Each keeps the original cover/center
   sizing so the DOM structure is preserved with zero inline styles.
   ========================================================================== */
.media-bg {
    background-size: cover;
    background-position: center;
}
.media-bg--center-center {
    background-size: cover;
    background-position: center center;
}

/* Screen 2 hero / screen 3 hero — engraved wooden wedding favor */
.media-bg-wedding-favor {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBZyU_o9gFOfIVwJsTcukPgch_8Gld9MC-boquGNyOXOdoJCQ0bEFf2VapNe_-vcvL-GINA4dvp2I8Run9oBnk8-lRENVLz9EaZw742_3z6ssFj8UpSVT4HNPRCI7m-xOOwqOCVnEbvKjABvdOxVkCiHSNmh7NNSccU-3TCfWt9ZsW5L6WVCPiEpQ40UxdbuurmfpgVvF31hp46oj4mNvAXhqDJkuiZHSE5x72DXT3XZVE3OFpcXm9A_buk_XRkBZD7WYxbAKl8POXX");
}

/* Screen 3 hero — engraved slate place card */
.media-bg-slate-place-card {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCKSLpBiP7KmFhrsaWXTayf9ntKLk3bAP8lop8Mq4XztQuFb9fmppzCsw1W0D6U-TLmIfXobQQQdBpJcXNUlFRie5XRO3PnywcGuBwC4tV8lwqNOr-AyG9GpWWA2Twsncrk_0JW_FA_84ZNAsAuZjrlCmiciAQV0jzKSwYOzE-W2fwB8wRu5Y3MONVKuFT7ODxW2ST9eqmT1Y9I9sQqz89vfuWL2Wmc7KC091-xSP_wQlojYVAEYf_Tje_Oc6evv0nbSisi7bd51NBD");
}

/* Screen 3 hero — organic stone & wood keepsakes */
.media-bg-stone-keepsakes {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDobOshbjIYGBsp3uvCP3Gy0ohHF-7TbMngpIzdFvQ31Fyn9guOEbqsWDZmLcezmPrFy86ejZwENB4XYEL1Xcok_4_nRcL35YbI3mVLxbHhn6Mb24LYOhYzlvHcXeMQeznf1kun_8XmlXAcuLTpm6nrOTc3U9Z5oiwb8YMe-LUfq8gs9uadOQb1oJHYRotoLGgylf5yJB-Mez1fdbO5ot3Gd8IhGmsDWqhO7NnS8omxsxtNpr1eAFLIfMHFhXrPOSp0wBTI5Xm3hgKQ");
}

/* Screen 3 showcase — custom wooden coasters */
.media-bg-custom-coasters {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuB-OLri8xPBtIZdOk66uVtHaMRUmQQtlzBSHa3PN2KCZ7Dh7MevX87IpfaQmrYj_eDB7TOpmAGM9JREHEuVPJt-15NHQTJh498tVKZ_hhlmHd2TjkA11o9T0LS5hMqECYBfuowDEGngGeQrUufVlItx9NfGT6cRxzAzaedjmKtM2FqOr1AZl7NmalP9CSy80tbWNq3eK8eoA3JDJRKTJrdZiFI1behTaOjH3YgcpOUvfH7EPPIPl90yBIAmYUq43cxGqL4bFrP8plxz");
}

/* Screen 3 showcase — agate table place cards */
.media-bg-agate-place-cards {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCTDXFPH1wKE9x0iRxuvO5KpqyuQr3s8NHBgq8SQNYzRCGyaxccwFeJpvcicqdTOpTujnmrdClfoYWMSW0DiFVVw2TytHHYlgw8bDwPKG-Gd4gDIMnlFbel5xHunOZH1uZL-OPD62mhLC3cswxGMggLE6YqLJl76kf5ZFnnEaVmbp3xCIvskxUnhRMFRT4KEKbU5RzY4xHIi1xcHBbkEXywdA8ayveMM2Xg0hcse_tHGVY5Pnf8-GyctJlVdmRQp0cEZVsQ52ZQUP8S");
}

/* Screen 3 showcase — bespoke executive gifts */
.media-bg-bespoke-gifts {
    background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDiyw7y0aYnG3lu6ObvTLVeT6dgkTNdzMi6464aF0Pj-iTzPuKMlWNA6W2D8l4fkz6_xZCsvLC-yFGevMf_9KMR1sMNhueE7lwmjsXBKYzxyyGJQjtqj5YuXdSdHuwC9a5XwloAuhfx14wptiUw74ol5A-64f-xNOnJB6tng2kZSdJPGK5QXWUghSiUysk5_KjOWaBzDPE6-MQ_hiDeEUZk9i1EkMbRty_j9XXW4qpS32IwQmnYFp5GTPqSA1nYSHjPy97JLJCBSPBP");
}