/* ===================================================================
   CARMELICIOUS CREATIVE STUDIO — Design Tokens & Base Styles
   =================================================================== */

:root {
    /* === COLOR PALETTE ===
       LIGHT THEME (gallery wall · pencil sketch · morning light).
       The palette-named tokens keep their names but now carry LIGHT values, so
       redefining them here recolours the whole in-scope site at once (the two
       standalone templates re-pin the original dark values further down).

       Read the roles, not the names:
         · the "charcoal" tokens are the warm BACKGROUND surfaces (paper → sand → card)
         · the "cream"    tokens are the warm dark INK (primary + secondary text)
         · peach / teal stay as accents, softened and deepened for legibility on cream
         · --cc-on-accent is dark ink for text that sits on a peach/teal/gold fill */
    /* SURFACES (was charcoal, now warm cream) */
    --cc-charcoal:        #F7F1E7;   /* PRIMARY PAGE BACKGROUND — warm cream          */
    --cc-charcoal-deep:   #EFE6D6;   /* alternate/"deep" section — deeper sand        */
    --cc-charcoal-soft:   #FBF6EE;   /* cards/panels — lightest warm off-white        */
    /* PRIMARY ACCENT — soft golden peach / terracotta */
    --cc-peach:           #D89B6C;   /* accent fills, icons, rules — reads on cream   */
    --cc-peach-light:     #E8B88A;   /* hover / lighter                               */
    --cc-peach-dark:      #9A5622;   /* deep terracotta — accent TEXT/links, AA on cream & sand */
    /* SECONDARY ACCENT — deep ocean teal / sage */
    --cc-teal:            #2A5F5A;   /* unchanged — reads beautifully on cream        */
    --cc-teal-light:      #3D8C84;
    /* TEXT (was cream, now warm dark greige — NEVER pure black) */
    --cc-cream:           #3B352C;   /* PRIMARY TEXT — soft warm charcoal             */
    --cc-cream-soft:      #6B6355;   /* secondary/muted text — warm grey             */
    /* SUPPORTING */
    --cc-olive:           #7C7A5E;   /* softened, lighter olive accent                */
    --cc-gold:            #C79A4B;
    --cc-champagne:       #F7E7CE;
    --cc-on-accent:       #2A251E;   /* dark ink to sit on peach/teal/gold fills      */
    --cc-error:           #C0453F;   /* deepened red — legible on cream               */

    /* === TYPOGRAPHY === */
    --cc-font-heading:    'Playfair Display', Georgia, serif;
    --cc-font-body:       'Inter', system-ui, -apple-system, sans-serif;
    --cc-font-accent:     'Cormorant Garamond', Georgia, serif;

    /* === SPACING SCALE === */
    --cc-space-xs:  4px;
    --cc-space-sm:  8px;
    --cc-space-md:  16px;
    --cc-space-lg:  32px;
    --cc-space-xl:  64px;
    --cc-space-2xl: 128px;

    /* === TYPE SCALE === */
    --cc-text-xs:   0.75rem;
    --cc-text-sm:   0.875rem;
    --cc-text-base: 1rem;
    --cc-text-lg:   1.125rem;
    --cc-text-xl:   1.25rem;
    --cc-text-2xl:  1.5rem;
    --cc-text-3xl:  2rem;
    --cc-text-4xl:  2.75rem;
    --cc-text-5xl:  3.75rem;
    --cc-text-6xl:  5rem;

    /* === TRANSITIONS === */
    --cc-ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --cc-transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* === RADIUS === */
    --cc-radius-sm:  4px;
    --cc-radius-md:  8px;
    --cc-radius-lg:  16px;
    --cc-radius-xl:  999px;

    /* === LAYOUT === */
    --cc-container:       1200px;   /* max content width */
    --cc-container-narrow: 760px;   /* max width for reading-length prose */
    --cc-gutter:          clamp(1.5rem, 5vw, 4rem);

    /* === SECTION RHYTHM === */
    --cc-section-y:       clamp(4rem, 10vw, 9rem);   /* vertical section padding */
    --cc-section-y-sm:    clamp(2.5rem, 6vw, 5rem);

    /* === ELEVATION ===
       Warm, soft, low-opacity shadows — a light-room diffusion, never a hard
       black drop. Tinted with a warm brown so cards feel lifted off the paper. */
    --cc-shadow-sm:  0 2px 10px -4px rgba(59,53,44,0.10);
    --cc-shadow-md:  0 12px 30px -10px rgba(59,53,44,0.14);
    --cc-shadow-lg:  0 24px 60px -18px rgba(59,53,44,0.18);
    --cc-shadow-peach: 0 10px 26px -8px rgba(184,122,78,0.30);

    /* === HAIRLINES (warm ink-on-light) === */
    --cc-line:       rgba(59,53,44,0.14);
    --cc-line-soft:  rgba(59,53,44,0.08);

    /* === HEADER === */
    --cc-header-h:   76px;
}

/* ===================================================================
   STANDALONE TEMPLATE SCOPE — keep the original DARK design
   -------------------------------------------------------------------
   The Landing Page (body.cc-landing) and Coming Soon (body.cc-coming-soon)
   templates intentionally keep the studio's original dark look. They consume
   the same palette tokens as the rest of the site, so the light re-map above
   would otherwise recolour them too.

   Re-pinning the original values here — scoped to each standalone <body> —
   restores their dark theme for their entire subtree WITHOUT editing
   landing-page.css or coming-soon.php. Because these selectors are more
   specific than :root, they win for every descendant of those pages.
   =================================================================== */
body.cc-landing,
body.cc-coming-soon {
    --cc-charcoal:        #2C2C2C;
    --cc-charcoal-deep:   #1A1A1A;
    --cc-charcoal-soft:   #3A3A3A;
    --cc-peach:           #E8B88A;
    --cc-peach-light:     #F2CBA8;
    --cc-peach-dark:      #C9955F;
    --cc-cream:           #F8F1E9;
    --cc-cream-soft:      #EDE4D8;
    --cc-gold:            #D4A853;
    --cc-on-accent:       #1A1A1A;
    --cc-error:           #E07070;

    --cc-shadow-sm:  0 2px 12px -4px rgba(0,0,0,0.35);
    --cc-shadow-md:  0 12px 32px -8px rgba(0,0,0,0.45);
    --cc-shadow-lg:  0 24px 64px -16px rgba(0,0,0,0.55);
    --cc-shadow-peach: 0 10px 28px -6px rgba(201,149,95,0.45);

    --cc-line:       rgba(232,184,138,0.14);
    --cc-line-soft:  rgba(232,184,138,0.08);
}

/* ===================================================================
   GLOBAL LAYOUT UTILITIES
   =================================================================== */
.cc-container {
    width: 100%;
    max-width: var(--cc-container);
    margin-inline: auto;
    padding-inline: var(--cc-gutter);
}
.cc-container-narrow {
    width: 100%;
    max-width: var(--cc-container-narrow);
    margin-inline: auto;
    padding-inline: var(--cc-gutter);
}
.cc-section { padding-block: var(--cc-section-y); }
.cc-section--sm { padding-block: var(--cc-section-y-sm); }
.cc-section--deep { background: var(--cc-charcoal-deep); }
.cc-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

/* ===================================================================
   BASE STYLES
   =================================================================== */
html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background: var(--cc-charcoal);
    color: var(--cc-cream);
    font-family: var(--cc-font-body);
    font-weight: 400;
    line-height: 1.6;
    /* No -webkit-font-smoothing: antialiased here. That thinning is tuned for
       light-text-on-dark; with dark text on a cream page it makes body copy look
       anaemic. Let the browser's default rendering stand. */
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--cc-peach);
    color: var(--cc-on-accent);
}

a {
    color: var(--cc-peach-dark);
    text-decoration: none;
    transition: color var(--cc-transition);
}
a:hover {
    /* Hover deepens to teal rather than the soft peach: peach (#D89B6C) is only
       ~2.1:1 on cream and would fail AA on hover. Teal is an on-brand accent
       that stays legible. */
    color: var(--cc-teal);
}

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

/* ===================================================================
   ACCESSIBILITY — skip link
   =================================================================== */
.cc-skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: var(--cc-peach);
    color: var(--cc-on-accent);
    padding: 0.5rem 1.5rem;
    z-index: 100000;
    font-weight: 500;
    transition: top 0.2s ease;
}
.cc-skip-link:focus {
    top: 0;
    outline: 2px solid var(--cc-on-accent);
    outline-offset: 2px;
}

/* Focus-visible baseline — a consistent, theme-appropriate ring for keyboard
   users on all interactive elements. Text inputs/textareas provide their own
   visible focus ring, so they are intentionally excluded here. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--cc-peach);
    outline-offset: 2px;
}

/* Screen-reader only utility */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    word-wrap: normal;
}

/* ===================================================================
   REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}