/*
Theme Name: Oroomi
Theme URI: https://oroomi.co.uk
Author: Oroomi Studio
Author URI: https://oroomi.co.uk
Description: A modern, luxury-minimalist WordPress & WooCommerce theme designed for personalised photo gifts, custom ornaments, and print collections. Built with fluid micro-interactions, responsive mobile-first UX, and seamless Oroomi customizer integration.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: oroomi
Tags: e-commerce, custom-colors, custom-menu, featured-images, flexible-header, responsive-layout, theme-options, woocommerce
*/

:root {
    /* Brand Color Palette */
    --oroomi-bg: #FAF7F2;
    --oroomi-surface: #FFFFFF;
    --oroomi-surface-warm: #F4EFEA;
    --oroomi-surface-card: #FFFFFF;
    
    /* Typography Inks */
    --oroomi-ink: #1C1917;
    --oroomi-ink-muted: #66605B;
    --oroomi-ink-faint: #A8A29E;
    
    /* Luxury Accents */
    --oroomi-terracotta: #C86146;
    --oroomi-terracotta-hover: #B2533B;
    --oroomi-gold: #D9822B;
    --oroomi-gold-soft: #FDF4EB;
    --oroomi-forest: #2D4A3E;
    --oroomi-forest-soft: #EEF4F0;
    
    /* Borders & Outlines */
    --oroomi-border: #E8E2D9;
    --oroomi-border-subtle: #F0ECE4;
    --oroomi-border-focus: #C86146;
    
    /* Radii */
    --oroomi-radius-sm: 8px;
    --oroomi-radius-md: 14px;
    --oroomi-radius-lg: 22px;
    --oroomi-radius-full: 9999px;
    
    /* Shadows */
    --oroomi-shadow-sm: 0 2px 6px rgba(28, 25, 23, 0.04);
    --oroomi-shadow-md: 0 8px 24px -4px rgba(28, 25, 23, 0.07), 0 2px 6px -1px rgba(28, 25, 23, 0.03);
    --oroomi-shadow-lg: 0 20px 40px -12px rgba(28, 25, 23, 0.12), 0 4px 12px -2px rgba(28, 25, 23, 0.04);
    --oroomi-shadow-float: 0 28px 56px -14px rgba(200, 97, 70, 0.18);
    
    /* Fonts */
    --font-heading: 'Newsreader', Georgia, 'Times New Roman', serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Transitions */
    --oroomi-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --oroomi-transition-smooth: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --oroomi-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Layout */
    --max-width: 1240px;
    --header-height: 80px;
    --announcement-height: 40px;
}

/* Base HTML & Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    background-color: var(--oroomi-bg);
    color: var(--oroomi-ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    max-width: 100vw;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--oroomi-transition-fast);
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.2;
    color: var(--oroomi-ink);
    letter-spacing: -0.02em;
}

h1 em, h2 em, h3 em {
    font-family: var(--font-heading);
    font-style: italic;
    font-weight: 400;
    color: var(--oroomi-terracotta);
}

.oroomi-container {
    width: 100%;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 600px) {
    .oroomi-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}