/* ==============================================================================
   Velvet Crumbs design system — token layer
   Ported verbatim from design_handoff_custom_cakes_landing/design-system/tokens/.
   Only fonts.css changed: the Google Fonts @import was swapped for self-hosted
   @font-face rules (assets/fonts/) so the live site makes no third-party requests.
   ============================================================================== */

/* ---------- tokens/fonts.css ---------- */
/* Velvet Crumbs webfonts — self-hosted.
   Cormorant Garamond + Jost, latin and latin-ext subsets, extracted from the design
   bundle so the site has no third-party font requests. Variable weight ranges. */

/* Cormorant Garamond — italic — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond — italic — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cormorant Garamond — normal — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Cormorant Garamond — normal — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost — italic — latin */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost — italic — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/jost-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Jost — normal — latin */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost — normal — latin-ext */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/jost-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
  --font-display:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --font-ui:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --font-script:"Parisienne","Cormorant Garamond",cursive;
  --font-mono:"SFMono-Regular",Menlo,Consolas,monospace;
}

/* ---------- tokens/colors.css ---------- */
:root{
  /* Cream — the brand's default ground, never pure white */
  --cream-50:#FFFDF9;
  --cream-100:#FBF6EE;
  --cream-200:#F5EDE0;
  --cream-300:#EADDC9;
  --cream-400:#DCC9AE;

  /* Ink — warm browns, never neutral grey */
  --ink-900:#241D19;
  --ink-800:#33291F;
  --ink-700:#4A3F38;
  --ink-500:#7A6B60;
  --ink-400:#9B8C80;
  --ink-300:#BFB2A6;

  /* Gold — the single accent that carries the brand */
  --gold-700:#8A6420;
  --gold-600:#A87B2C;
  --gold-500:#C09545;
  --gold-400:#D3AF6C;
  --gold-200:#E7D3A8;
  --gold-50:#F8F1DF;

  /* Blush — secondary, drawn from the buttercream palette */
  --blush-600:#C0707A;
  --blush-500:#DE909C;
  --blush-300:#F1C4CA;
  --blush-100:#FBE9EB;

  /* Sage — the piped-leaf green, used in tiny doses */
  --sage-600:#6F8060;
  --sage-400:#95A487;
  --sage-100:#E5EADE;

  /* Semantic status */
  --success-600:#5B7A55;
  --success-100:#E6EEE2;
  --warning-600:#B07A28;
  --warning-100:#F8EEDA;
  --danger-600:#A8443C;
  --danger-100:#F6E3E0;

  /* ---- Semantic aliases: use these in components ---- */
  --bg-page:var(--cream-100);
  --bg-surface:var(--cream-50);
  --bg-raised:#FFFFFF;
  --bg-tint:var(--gold-50);
  --bg-tint-blush:var(--blush-100);
  --bg-inverse:var(--ink-900);

  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-accent:var(--gold-700);
  --text-on-accent:#FFFDF9;
  --text-on-inverse:var(--cream-100);

  --accent:var(--gold-600);
  --accent-hover:var(--gold-700);
  --accent-soft:var(--gold-200);
  --accent-alt:var(--blush-600);

  --border-hairline:#E6DACA;
  --border-soft:var(--cream-300);
  --border-strong:var(--cream-400);
  --border-accent:var(--gold-400);
  --border-inverse:rgba(255,253,249,.22);

  --focus-ring:rgba(168,123,44,.42);
  --overlay-scrim:rgba(36,29,25,.44);
}

/* ---------- tokens/typography.css ---------- */
:root{
  /* Display — Cormorant Garamond, set large and tight */
  --display-1:400 clamp(48px,6vw,86px)/1.02 var(--font-display);
  --display-2:400 clamp(38px,4.4vw,60px)/1.06 var(--font-display);
  --display-3:400 clamp(30px,3vw,42px)/1.12 var(--font-display);
  --heading-1:500 30px/1.2 var(--font-display);
  --heading-2:500 24px/1.28 var(--font-display);
  --heading-3:600 19px/1.34 var(--font-display);

  /* Body — Jost, 300/400, generous leading */
  --body-lg:300 18px/1.66 var(--font-ui);
  --body-md:300 15.5px/1.68 var(--font-ui);
  --body-sm:300 13.5px/1.6 var(--font-ui);
  --body-xs:400 12px/1.5 var(--font-ui);

  /* Eyebrow / label — letterspaced uppercase Jost */
  --eyebrow:500 11px/1.2 var(--font-ui);
  --label:500 12.5px/1.2 var(--font-ui);
  --button-label:500 12.5px/1 var(--font-ui);

  --script-lg:400 44px/1.1 var(--font-script);

  --tracking-display:-0.015em;
  --tracking-body:0em;
  --tracking-eyebrow:0.22em;
  --tracking-label:0.08em;
  --tracking-button:0.14em;

  --text-max-measure:64ch;
}

/* ---------- tokens/spacing.css ---------- */
:root{
  --space-0:0px;  --space-1:2px;  --space-2:4px;  --space-3:8px;
  --space-4:12px; --space-5:16px; --space-6:20px; --space-7:24px;
  --space-8:32px; --space-9:40px; --space-10:56px; --space-11:72px;
  --space-12:96px; --space-13:128px;

  /* Rhythm */
  --gutter:24px;
  --section-y:clamp(64px,9vw,120px); /* @kind spacing */
  --stack-tight:8px;
  --stack:16px;
  --stack-loose:32px;

  /* Container widths */
  --container-page:1200px;
  --container-text:680px;
  --container-narrow:520px;
}

/* ---------- tokens/radius.css ---------- */
:root{
  --radius-xs:3px;
  --radius-sm:5px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:24px;
  --radius-pill:999px;
  /* Signature: the arch. Applied as border-radius on imagery + frames. */
  --radius-arch:50% 50% 0 0 / 42% 42% 0 0;
  --radius-arch-soft:180px 180px 12px 12px;
  --border-hair:1px;
}

/* ---------- tokens/elevation.css ---------- */
:root{
  /* Shadows are warm, wide and very low opacity — cards float on cream, they don't pop */
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-soft:0 1px 2px rgba(36,29,25,.04), 0 8px 24px -12px rgba(36,29,25,.10);
  --shadow-card:0 1px 2px rgba(36,29,25,.05), 0 18px 40px -24px rgba(36,29,25,.16);
  --shadow-raised:0 2px 6px rgba(36,29,25,.06), 0 32px 64px -28px rgba(36,29,25,.22);
  --shadow-inset-hair:inset 0 0 0 1px var(--border-hairline);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  /* Protection gradient for type over photography */
  --scrim-bottom:linear-gradient(to top,rgba(36,29,25,.62) 0%,rgba(36,29,25,.24) 42%,transparent 78%); /* @kind other */
  --scrim-full:linear-gradient(to bottom,rgba(36,29,25,.30),rgba(36,29,25,.46)); /* @kind other */
  --blur-capsule:saturate(1.1) blur(10px); /* @kind other */
}

/* ---------- tokens/motion.css ---------- */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --dur-reveal:560ms; /* @kind other */
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-soft:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
  --transition-base:all var(--dur-base) var(--ease-out); /* @kind other */
  --hover-lift:translateY(-2px); /* @kind other */
  --press-scale:scale(.985); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms; /* @kind other */
    --dur-base:0ms; /* @kind other */
    --dur-slow:0ms; /* @kind other */
    --dur-reveal:0ms; /* @kind other */
    --hover-lift:none; /* @kind other */
    --press-scale:none; /* @kind other */
  }
}

/* ---------- tokens/base.css ---------- */
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--bg-page);color:var(--text-body);font:var(--body-md);letter-spacing:var(--tracking-body);text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);font-family:var(--font-display);font-weight:400;letter-spacing:var(--tracking-display);text-wrap:balance}
p{margin:0}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid var(--border-accent);transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
a:hover{color:var(--ink-900);border-color:var(--ink-900)}
::selection{background:var(--gold-200);color:var(--ink-900)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
.vc-eyebrow{font:var(--eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}