/* Studija Luna design tokens - copied verbatim from the Claude Design system (tokens/colors, typography, spacing, effects, base).
   Order matters: typography.css redefines --text-body (1rem) after colors.css (ink colour), exactly as in the design,
   so color:var(--text-body) resolves the same way it does in the prototype. Fonts are enqueued separately. */

/* ---- tokens/colors.css ---- */
:root{
/* ---- Base palette (given by brand) ---- */
--luna-sand:#bda48b;        /* primary — buttons, icon circles, accents */
--luna-caramel:#c89f7b;     /* accent — hovers, highlights, links */
--luna-mist:#e6e6e4;        /* cool light grey — alt section backgrounds */
--luna-black:#000000;       /* text on light */
--luna-white:#ffffff;       /* text on sand/dark, card surfaces */
/* ---- Derived tints (from brand photography; keep soft, never vivid) ---- */
--luna-cream:#f7f4f0;       /* warm off-white page background */
--luna-sand-25:#eee8df;     /* sand 25% tint — soft section wash */
--luna-sand-12:#f5f1ec;     /* sand 12% tint — subtle blocks, hovers */
--luna-sand-deep:#a98e73;   /* sand darkened — primary button hover */
--luna-caramel-deep:#b5885f;/* caramel darkened — accent hover */
--luna-ink-soft:rgba(30,25,20,0.72);  /* body copy — softened black */
--luna-ink-faint:rgba(30,25,20,0.45); /* captions, meta */
/* ---- Semantic aliases ---- */
--surface-page:var(--luna-cream);
--surface-card:var(--luna-white);
--surface-section:var(--luna-sand-25);
--surface-section-cool:var(--luna-mist);
--surface-accent:var(--luna-sand);
--text-heading:var(--luna-black);
--text-body:var(--luna-ink-soft);
--text-muted:var(--luna-ink-faint);
--text-on-accent:var(--luna-white);
--accent:var(--luna-caramel);
--accent-hover:var(--luna-caramel-deep);
--button-bg:var(--luna-sand);
--button-bg-hover:var(--luna-sand-deep);
--border-soft:rgba(30,25,20,0.10);
--border-accent:rgba(189,164,139,0.55);
--focus-ring:0 0 0 3px rgba(200,159,123,0.35);
}


/* ---- tokens/typography.css ---- */
:root{
--font-display:"Playfair Display","Noto Serif Display",Georgia,serif;
--font-body:"Raleway","Helvetica Neue",Arial,sans-serif;
/* Scale (desktop-first, clamp for fluidity) */
--text-hero:clamp(2.5rem,4.5vw,4rem);       /* 40–64px */
--text-h1:clamp(2.25rem,3.5vw,3.25rem);     /* 36–52px */
--text-h2:clamp(1.75rem,2.6vw,2.5rem);      /* 28–40px */
--text-h3:1.5rem;                            /* 24px */
--text-h4:1.1875rem;                         /* 19px */
--text-lead:1.1875rem;                       /* 19px intro copy */
--text-body:1rem;                            /* 16px */
--text-small:0.875rem;                       /* 14px */
--text-eyebrow:0.8125rem;                    /* 13px uppercase labels */
/* Line heights */
--leading-display:1.15;
--leading-heading:1.25;
--leading-body:1.7;
/* Tracking */
--tracking-eyebrow:0.24em;
--tracking-button:0.14em;
--tracking-wide:0.08em;
/* Weights */
--weight-display:500;      /* Playfair medium */
--weight-display-light:400;
--weight-body:400;
--weight-medium:500;
--weight-semibold:600;
--weight-light:300;
}


/* ---- tokens/spacing.css ---- */
:root{
--space-1:0.25rem;
--space-2:0.5rem;
--space-3:0.75rem;
--space-4:1rem;
--space-5:1.5rem;
--space-6:2rem;
--space-7:3rem;
--space-8:4rem;
--space-9:6rem;
--section-pad:clamp(4rem,8vw,7rem);   /* vertical rhythm between page sections */
--container:1140px;                    /* content max-width */
--container-narrow:760px;              /* prose / centered intros */
--gutter:clamp(1.25rem,4vw,2.5rem); /* @kind spacing */
}


/* ---- tokens/effects.css ---- */
:root{
/* Corner radii — everything is soft & flowing */
--radius-soft:14px;        /* inputs, small blocks */
--radius-card:22px;        /* cards, image boxes */
--radius-pill:999px;       /* buttons, tags */
--radius-arch:999px 999px 22px 22px; /* signature arch image frame */
--radius-circle:50%;       /* icon circles, portrait accents */
/* Shadows — warm, diffuse, never harsh */
--shadow-soft:0 18px 40px -22px rgba(120,98,76,0.35);
--shadow-card:0 10px 30px -14px rgba(120,98,76,0.22);
--shadow-lift:0 26px 50px -24px rgba(120,98,76,0.42);
/* Motion — slow, gentle, no bounces */
--ease-soft:cubic-bezier(0.25,0.6,0.3,1); /* @kind other */
--duration-fast:180ms; /* @kind other */
--duration:300ms; /* @kind other */
--duration-slow:600ms; /* @kind other */
/* Borders */
--border-hairline:1px solid var(--border-soft);
--border-accent-line:1px solid var(--border-accent);
}


/* ---- tokens/base.css ---- */
/* Minimal global defaults so consumers inherit the Luna feel automatically */
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);margin:0;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-heading);line-height:var(--leading-heading);margin:0 0 var(--space-4)}
h4,h5,h6{font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--text-heading);margin:0 0 var(--space-3)}
a{color:var(--accent);text-decoration:none;transition:color var(--duration-fast) var(--ease-soft)}
a:hover{color:var(--accent-hover)}
::selection{background:var(--luna-sand-25);color:var(--luna-black)}