/*
Theme Name: Rocca Marina
Theme URI: https://rocca-marina.com
Author: Matrix Agency
Author URI: #
Description: Thème custom pour Rocca Marina — Restaurant Oriental Familial, Corniche des Almadies, Dakar
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: rocca-marina
*/

/* ============================================================
   VARIABLES CSS CUSTOM PROPERTIES
   ============================================================ */

:root {

    /* --- Couleurs --- */
    --color-black:        #0D0D0D;
    --color-black-soft:   #111111;
    --color-black-card:   #1A1A1A;
    --color-gold:         #C9A84C;
    --color-gold-light:   #F0D080;
    --color-gold-dark:    #9A6F2E;
    --color-white:        #F5F0E8;
    --color-white-muted:  #A89880;
    --color-overlay:      rgba(13, 13, 13, 0.85);

    /* --- Typographies --- */
    --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --font-accent:  'Cinzel', Georgia, serif;

    /* --- Tailles de police fluides --- */
    --text-xs:   clamp(0.75rem,  1.5vw, 0.875rem);
    --text-sm:   clamp(0.875rem, 1.8vw, 1rem);
    --text-base: clamp(1rem,     2vw,   1.125rem);
    --text-lg:   clamp(1.125rem, 2.2vw, 1.25rem);
    --text-xl:   clamp(1.25rem,  2.5vw, 1.5rem);
    --text-2xl:  clamp(1.5rem,   3vw,   2rem);
    --text-3xl:  clamp(2rem,     4vw,   2.75rem);
    --text-4xl:  clamp(2.5rem,   5vw,   3.5rem);
    --text-5xl:  clamp(3rem,     6vw,   5rem);

    /* --- Espacements --- */
    --spacing-xs:   0.25rem;   /*  4px */
    --spacing-sm:   0.5rem;    /*  8px */
    --spacing-md:   1rem;      /* 16px */
    --spacing-lg:   1.5rem;    /* 24px */
    --spacing-xl:   2rem;      /* 32px */
    --spacing-2xl:  3rem;      /* 48px */
    --spacing-3xl:  4rem;      /* 64px */
    --spacing-4xl:  6rem;      /* 96px */
    --spacing-5xl:  8rem;      /* 128px */

    /* --- Border-radius --- */
    --radius-xs:  2px;
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* --- Transitions --- */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.3s ease;
    --transition-slow:   all 0.5s ease;
    --transition-spring: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

    /* --- Ombres dorées --- */
    --shadow-gold-sm:  0 2px 12px rgba(201, 168, 76, 0.2);
    --shadow-gold-md:  0 4px 24px rgba(201, 168, 76, 0.3);
    --shadow-gold-lg:  0 8px 40px rgba(201, 168, 76, 0.4);
    --shadow-gold-xl:  0 12px 60px rgba(201, 168, 76, 0.5);
    --shadow-dark-sm:  0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-dark-md:  0 4px 24px rgba(0, 0, 0, 0.6);
    --shadow-dark-lg:  0 8px 40px rgba(0, 0, 0, 0.8);

    /* --- Z-index layers --- */
    --z-base:    1;
    --z-above:   10;
    --z-float:   250;
    --z-header:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;

    /* --- Container --- */
    --container-sm:   640px;
    --container-md:   768px;
    --container-lg:   1024px;
    --container-xl:   1280px;
    --container-2xl:  1440px;
    --container-pad:  clamp(1rem, 5vw, 2.5rem);
}

/* ============================================================
   RESET CSS MINIMAL
   ============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}