/* ====================================================================
   Creativelines Limited — Design Tokens
   Brand colors, typography, spacing, motion

   Palette: warm cream / ivory light theme. Editorial, sophisticated,
   and lets the gold + red brand colors carry the energy. The "dark"
   text/UI surfaces are deep espresso-brown rather than charcoal, so
   the whole palette stays in a warm family.
   ==================================================================== */

:root {
    /* ─── Brand Colors ─────────────────────────────────── */
    --cl-yellow:       #E8B923;
    --cl-yellow-deep:  #C99A14;
    --cl-yellow-soft:  #FFD447;
    --cl-red:          #D9201F;
    --cl-red-deep:     #B0181A;
    --cl-red-soft:     #F44A45;

    /* ─── Warm Light Ramp (primary surfaces) ──────────────
       Cream/ivory family — paper-like, editorial, never stark white. */
    --cl-ivory:        #FAF6EC;    /* primary page background */
    --cl-cream:        #F4EDDD;    /* alt surface (section bands) */
    --cl-sand:         #EBE2CC;    /* elevated edges / dividers */
    --cl-paper:        #FFFFFF;    /* highest elevation (modals) */

    /* ─── Warm Dark Ramp (text + dark surfaces) ───────────
       Deep espresso-brown — replaces the old pure-black/charcoal. */
    --cl-espresso:     #0E0E0E;    /* primary text + dark accents */
    --cl-espresso-2:   #3D3225;    /* secondary dark surfaces */
    --cl-espresso-3:   #524634;    /* tertiary dark surfaces */
    --cl-mocha:        #6E5F4B;    /* muted text on light */
    --cl-stone-700:    #8C7C66;    /* subtle text on light */
    --cl-stone-500:    #B0A089;    /* tertiary muted text */
    --cl-stone-300:    #CFC3AA;    /* dividers, faint borders */

    --cl-offwhite:     var(--cl-ivory);
    --cl-white:        var(--cl-paper);

    /* Legacy aliases — preserved so existing CSS that references
       --cl-black / --cl-charcoal / --cl-graphite / --cl-grey-* still works.
       They now point into the espresso/stone ramp. */
    --cl-black:        var(--cl-espresso);
    --cl-charcoal:     var(--cl-espresso-2);
    --cl-graphite:     var(--cl-espresso-3);
    --cl-grey-700:     var(--cl-mocha);
    --cl-grey-500:     var(--cl-stone-700);
    --cl-grey-300:     var(--cl-stone-500);
    --cl-grey-100:     var(--cl-stone-300);

    /* ─── Semantic — LIGHT THEME (now default) ──────────── */
    --cl-bg:           var(--cl-ivory);
    --cl-bg-alt:       var(--cl-cream);
    --cl-bg-elevated:  var(--cl-paper);
    --cl-fg:           var(--cl-espresso);
    --cl-fg-muted:     var(--cl-mocha);
    --cl-fg-subtle:    var(--cl-stone-700);
    --cl-border:       rgba(44, 34, 24, 0.12);
    --cl-border-strong:rgba(44, 34, 24, 0.22);
    --cl-accent:       var(--cl-yellow);
    --cl-accent-2:     var(--cl-red);
    --cl-overlay:      rgba(44, 34, 24, 0.55);

    /* ─── Typography ───────────────────────────────────── */
    --font-display:    'Fraunces', Georgia, serif;
    --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:       'SF Mono', Menlo, Consolas, monospace;

    --fs-xs:           clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
    --fs-sm:           clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
    --fs-base:         clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
    --fs-md:           clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
    --fs-lg:           clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
    --fs-xl:           clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --fs-2xl:          clamp(2rem, 1.6rem + 1.5vw, 2.75rem);
    --fs-3xl:          clamp(2.75rem, 2rem + 2.5vw, 4rem);
    --fs-4xl:          clamp(3.5rem, 2.5rem + 4vw, 6rem);
    --fs-5xl:          clamp(4.5rem, 3rem + 6vw, 9rem);

    /* ─── Spacing ──────────────────────────────────────── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    /* ─── Layout ───────────────────────────────────────── */
    --container-max:   1440px;
    --container-pad:   clamp(1.25rem, 3vw, 3rem);
    --header-h:        80px;

    /* ─── Radii ────────────────────────────────────────── */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 20px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* ─── Motion ───────────────────────────────────────── */
    --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
    --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --t-fast:          150ms;
    --t-base:          280ms;
    --t-slow:          560ms;
    --t-cinematic:     900ms;

    /* ─── Shadow ──────────────────────────────────────────
       Warm-tinted shadows — gentle and natural against ivory. */
    --shadow-sm:       0 2px 6px rgba(44, 34, 24, 0.06);
    --shadow-md:       0 8px 20px rgba(44, 34, 24, 0.10);
    --shadow-lg:       0 20px 50px rgba(44, 34, 24, 0.14);
    --shadow-xl:       0 30px 70px rgba(44, 34, 24, 0.18);
    --shadow-glow-y:   0 0 40px rgba(232, 185, 35, 0.30);
    --shadow-glow-r:   0 0 40px rgba(217, 32, 31, 0.25);
}

/* ─── Dark Theme Override (opt-in via data-theme="dark") ───
   Still warm — uses espresso surfaces, not cold charcoal. */
[data-theme="dark"] {
    --cl-bg:           var(--cl-espresso);
    --cl-bg-alt:       var(--cl-espresso-2);
    --cl-bg-elevated:  var(--cl-espresso-3);
    --cl-fg:           var(--cl-ivory);
    --cl-fg-muted:     var(--cl-stone-300);
    --cl-fg-subtle:    var(--cl-stone-500);
    --cl-border:       rgba(232, 218, 192, 0.10);
    --cl-border-strong:rgba(232, 218, 192, 0.20);
    --cl-overlay:      rgba(20, 16, 10, 0.65);
}