/*
 * Design tokens — "Warm Luxury Editorial" (stitch …/warm_luxury_editorial/DESIGN.md).
 * The single source of colour, type, spacing and motion for site.css and admin.css.
 * Change the brand here, not in components.
 */
:root {
    /* Surfaces: untreated cashmere, archival book stock */
    --paper: #fbf9f5;          /* Base ground (warm cashmere) */
    --paper-2: #f5f1ea;        /* Surface mid (soft sand): alternating sections */
    --sand: #efeae1;           /* Surface high (ivory linen): cards, badges, quotes */
    --sand-2: #e8e1d5;         /* Pale almond: nested blocks */
    --white: #ffffff;

    /* Ink */
    --ink: #1c1a18;            /* Deep charcoal espresso: headlines and body */
    --ink-2: #2b2825;          /* Slate umber: secondary paragraphs */
    --ink-3: #68635b;          /* Muted charcoal: metadata, captions */
    --deep: #1c1a18;           /* Filled buttons, dark sections */
    --deep-2: #2b2825;
    --deep-3: #141210;         /* Footer */
    --olive: #4a473e;          /* Deep olive / taupe: hover, anchors, badge text */

    /* Accents: brushed champagne */
    --gold: #c5a880;           /* Accents, active indicators, hairline links (decorative, not for small text) */
    --gold-ink: #725b38;       /* Gold for text on light surfaces (AA contrast) */
    --gold-light: #e0c298;     /* Gold for text on dark surfaces */
    --gold-soft: #f3eadb;      /* Champagne wash for highlighted panels */

    --line: #e3ddd2;           /* Structural hairlines */
    --line-2: #cfc6b8;
    --outline: #7d766f;        /* Edges of form controls: 3:1 or more on paper and white (WCAG 1.4.11) */

    /* Keyboard focus: gold-ink on light surfaces (6.1:1); dark surfaces set it to --gold-light */
    --focus: var(--gold-ink);

    --success: #2f6b4f;
    --success-bg: #e5f1ea;
    --warning: #7d5300;
    --warning-bg: #fbefd5;
    --danger: #ba1a1a;
    --danger-bg: #ffdad6;
    --info-bg: #efeae1;
    --danger-bg-2: #f2d2cd;    /* Danger button hover */
    --google: #c9d6e6;         /* Busy times from Google Calendar in the admin week: deliberately not brand */
    --google-soft: #dbe5f1;

    /* Type: Playfair Display (editorial serif) + Plus Jakarta Sans (precise grotesque) */
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-xs: 0.75rem;                                          /* label-caps 12px */
    --text-sm: 0.875rem;                                         /* body-sm 14px */
    --text-base: 1rem;                                           /* body-md 16px */
    --text-lg: 1.125rem;                                         /* body-lg 18px */
    --text-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);           /* headline-sm 24px */
    --text-quote: clamp(1.3rem, 1.1rem + 0.7vw, 1.625rem);       /* quote-lead 26px */
    --text-2xl: clamp(1.6rem, 1.35rem + 0.9vw, 2rem);            /* headline-md 32px */
    --text-3xl: clamp(2rem, 1.45rem + 1.8vw, 2.75rem);           /* headline-lg 32 → 44px */
    --text-hero: clamp(2.5rem, 1.6rem + 3.4vw, 4rem);            /* display-hero 40 → 64px */
    --measure: 68ch;                                             /* 55–70 characters per line */

    /* Space & shape */
    --container: 1280px;
    --gutter: clamp(20px, 4vw, 64px);                            /* 1.25rem mobile → 4rem desktop */
    --section: clamp(64px, 8vw, 96px);                           /* space-2xl → space-3xl */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;                                           /* cards and panels */
    --radius-xl: 28px;                                           /* large media */
    --radius-pill: 9999px;                                       /* every human touchpoint */

    /* Depth: tonal layering plus ultra-diffused warm shadows, never harsh */
    --shadow-sm: 0 1px 2px rgba(28, 26, 24, 0.04);
    --shadow: 0 12px 36px -4px rgba(28, 26, 24, 0.07);
    --shadow-lg: 0 28px 60px -18px rgba(28, 26, 24, 0.16);
    --shadow-button: 0 8px 24px -2px rgba(28, 26, 24, 0.12);

    /* Motion: slow and soft, never bouncy */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 180ms;
    --dur: 420ms;
    --dur-slow: 900ms;
}

/* Persian: a high-legibility Naskh face at matching weight and scale, with generous line spacing. */
:root[lang="fa"] {
    --font-display: "Noto Naskh Arabic", "Vazirmatn", Tahoma, serif;
    --font-body: "Noto Naskh Arabic", "Vazirmatn", Tahoma, sans-serif;
}

/* The `hidden` attribute always wins. Components set their own display, which would otherwise beat the
   browser default and show what the markup or a script has hidden: an empty error notice, a one-option
   choice, the booking success panel. Kept here because site.css and admin.css both load this file first. */
[hidden] { display: none !important; }