/* ============================================
   STYLE.CSS — Design System & Base Styles
   Norwang Cafe & Restaurant
   ============================================ */

:root {
    /* Colors — from PRD */
    --clr-bg: #FCFBF8;
    --clr-bg-dark: #0F0F10;
    --clr-surface: #F9F8F5;

    --clr-text: #111111;
    --clr-text-2: #666666;
    --clr-text-muted: #9A9A9A;
    --clr-text-inv: #FFFFFF;

    --clr-border: #E7E7E7;
    --clr-border-hover: #CFCFCF;
    --clr-accent: #000000;
    --clr-accent-blue: #3B7DD8;

    /* Typography */
    --ff-heading: 'Cormorant Garamond', serif;
    --ff-body: 'Inter', sans-serif;
    --ff-mono: 'IBM Plex Mono', monospace;

    /* Spacing */
    --s-4: 4px;
    --s-8: 8px;
    --s-12: 12px;
    --s-16: 16px;
    --s-20: 20px;
    --s-24: 24px;
    --s-32: 32px;
    --s-40: 40px;
    --s-48: 48px;
    --s-64: 64px;
    --s-80: 80px;
    --s-96: 96px;
    --s-120: 120px;

    /* Radius */
    --r-0: 0px;
    --r-2: 2px;
    --r-4: 4px;

    /* Shadow */
    --shadow: 0 10px 40px rgba(0,0,0,0.04);
    --shadow-md: 0 10px 60px rgba(0,0,0,0.08);

    /* Transitions */
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
    font-family: var(--ff-body);
    color: var(--clr-text);
    background: radial-gradient(circle at top, #ffffff 0%, #fcfbf8 65%);
    background-color: #fcfbf8;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

a {
    color: inherit;
    text-decoration: none;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

ul { list-style: none; }
address { font-style: normal; }

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-heading);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: var(--clr-text);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

p {
    font-size: 1rem;
    color: var(--clr-text-2);
    line-height: 1.7;
    margin-bottom: var(--s-16);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}
p:last-child { margin-bottom: 0; }

/* Utility */
.bg-surface { background-color: var(--clr-surface); }
.bg-dark {
    background-color: var(--clr-bg-dark);
    color: var(--clr-text-inv);
}
.bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark p, .bg-dark address {
    color: var(--clr-text-inv);
}

/* Selection */
::selection {
    background-color: var(--clr-accent);
    color: var(--clr-text-inv);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--clr-surface); }
::-webkit-scrollbar-thumb { background: var(--clr-border-hover); }