/* Tessera Design Tokens — Apple-esque Warm Kitchen */

:root {
    /* Primary */
    --sage: #7A9B6D;
    --sage-light: #E8F0E5;
    --sage-dark: #5C7D50;

    /* Accent */
    --terracotta: #C4785C;
    --terracotta-light: #F5E6E0;

    /* Surfaces */
    --surface-1: #FBFAF8;
    --surface-2: #F5F3F0;
    --surface-3: #EEEAE5;
    --surface-dark: #1D1B18;
    --surface-dark-2: #2A2724;
    --white: #FFFFFF;

    /* Translucent section backgrounds — tile mosaic peeks through edges */
    --surface-1-bg: rgba(251, 250, 248, 0.88);
    --surface-2-bg: rgba(245, 243, 240, 0.86);
    --surface-dark-bg: rgba(29, 27, 24, 0.95);

    /* Text */
    --text-primary: #1D1B18;
    --text-secondary: #6E6560;
    --text-tertiary: #9E958C;

    /* Shadows */
    --shadow-card: 0 2px 12px rgba(29, 27, 24, 0.04);
    --shadow-card-hover: 0 8px 30px rgba(29, 27, 24, 0.08);
    --shadow-elevated: 0 12px 40px rgba(29, 27, 24, 0.12);

    /* Radius */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-2xl: 36px;
    --radius-pill: 100px;

    /* Spacing */
    --section-gap: 160px;

    /* Transitions */
    --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
    --sage: #8FB583;
    --sage-light: #2A3528;
    --sage-dark: #7A9B6D;
    --terracotta: #E8A990;
    --terracotta-light: #3A2A24;
    --surface-1: #111110;
    --surface-2: #1A1918;
    --surface-3: #242322;
    --surface-dark: #0A0A09;
    --surface-dark-2: #161514;
    --white: #1E1D1C;
    --surface-1-bg: rgba(17, 17, 16, 0.88);
    --surface-2-bg: rgba(26, 25, 24, 0.86);
    --surface-dark-bg: rgba(10, 10, 9, 0.95);
    --text-primary: #F5F0E8;
    --text-secondary: #A09890;
    --text-tertiary: #706860;
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.2);
    --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.4);
}