/* =====================================================================
   ALEXIS WARE — DESIGN TOKENS (v1)
   Single source of truth for color, type, space, shape, motion.
   Modeled on the DTCG three-tier pattern (ref → sys → component).
   Palette: Plum · Rose · Cyan · Cream · Gold.
   ===================================================================== */

:root {
  /* ---- REFERENCE: raw palette ramps (10 deep → 95 light) ---------- */

  /* Plum — primary brand */
  --ref-plum-10: #1C1016;
  --ref-plum-20: #341C29;
  --ref-plum-30: #4D2B3D;
  --ref-plum-40: #814766;   /* base */
  --ref-plum-50: #986882;
  --ref-plum-60: #AD879C;
  --ref-plum-70: #C3A7B6;
  --ref-plum-80: #D9C8D1;
  --ref-plum-90: #ECE3E8;
  --ref-plum-95: #F5F0F3;

  /* Rose — secondary brand */
  --ref-rose-10: #2B1921;
  --ref-rose-20: #4E2E3C;
  --ref-rose-30: #76455B;
  --ref-rose-40: #C47397;   /* base */
  --ref-rose-50: #CF8CAA;
  --ref-rose-60: #D9A4BB;
  --ref-rose-70: #E3BCCD;
  --ref-rose-80: #EDD5E0;
  --ref-rose-90: #F6EAEF;

  /* Cyan — electric accent / brightest blue */
  --ref-cyan-10: #123338;
  --ref-cyan-20: #205C65;
  --ref-cyan-30: #318B98;
  --ref-cyan-40: #51E7FD;   /* base */
  --ref-cyan-60: #8EEFFE;
  --ref-cyan-80: #CBF8FE;
  --ref-cyan-90: #E5FBFF;

  /* Azure — dominant mid blue (new) */
  --ref-azure-10: #0C1D2E;
  --ref-azure-20: #153250;
  --ref-azure-30: #1F4975;
  --ref-azure-40: #2F6FB2;  /* base */
  --ref-azure-50: #598CC1;
  --ref-azure-60: #82A9D1;
  --ref-azure-70: #A8C3DF;
  --ref-azure-80: #C9DAEB;
  --ref-azure-90: #E4ECF5;

  /* Teal — deep turquoise (darker version of the cyan/turquoise).
     Kept under the --ref-indigo-* names so all existing deep-blue surfaces,
     gradients and hero panels inherit the turquoise retone automatically. */
  --ref-indigo-05: #041116;  /* near-black blue-turquoise */
  --ref-indigo-10: #061C24;
  --ref-indigo-20: #0B3140;
  --ref-indigo-30: #104B62;
  --ref-indigo-40: #176B8C;  /* base — deep blue-turquoise (bluer, darker) */
  --ref-indigo-50: #4589A3;
  --ref-indigo-60: #74A6BA;
  --ref-indigo-70: #9EC1CF;
  --ref-indigo-80: #C3D9E1;
  --ref-indigo-90: #E1ECF0;
  /* convenience aliases (same values, turquoise-named) */
  --ref-teal-05: #041116; --ref-teal-10: #061C24; --ref-teal-20: #0B3140;
  --ref-teal-30: #104B62; --ref-teal-40: #176B8C; --ref-teal-80: #C3D9E1;

  /* Gold — warm highlight */
  --ref-gold-10: #352908;
  --ref-gold-20: #614B0F;
  --ref-gold-30: #917117;
  --ref-gold-40: #F2BC26;   /* base */
  --ref-gold-50: #F4C84D;
  --ref-gold-70: #F9DF97;
  --ref-gold-90: #FDF5DE;

  /* Cream — warm neutral */
  --ref-cream-40: #F4E2C9;  /* base */
  --ref-cream-60: #F8ECDC;
  --ref-cream-80: #FCF6EF;

  /* Ink + deep surfaces */
  --ref-ink:        #2A1721;  /* near-black plum — default text */
  --ref-ink-soft:   #5A4450;  /* muted body / captions */
  --ref-deep:       #22121B;  /* deep plum surface (manifesto/door/footer) */
  --ref-page:       #FBF5EE;  /* warm near-white page */
  --ref-white:      #FFFFFF;

  /* ---- SYSTEM: semantic roles ----------------------------------- */

  --color-page:            var(--ref-page);
  --color-surface:         var(--ref-white);
  --color-surface-cream:   var(--ref-cream-40);
  --color-surface-cream-2: var(--ref-cream-60);
  --color-surface-deep:    var(--ref-deep);
  --color-surface-plum:    var(--ref-plum-40);

  --color-text:            var(--ref-ink);
  --color-text-soft:       var(--ref-ink-soft);
  --color-text-on-deep:    #F7ECEF;          /* warm white on deep plum */
  --color-text-on-deep-soft: rgba(247,236,239,0.72);
  --color-text-on-plum:    #FFFFFF;

  --color-brand:           var(--ref-plum-40);
  --color-brand-deep:      var(--ref-plum-20);
  --color-secondary:       var(--ref-rose-40);
  --color-blue:            var(--ref-azure-40);   /* dominant blue */
  --color-blue-deep:       var(--ref-indigo-40);  /* deep blue-violet bridge */
  --color-accent:          var(--ref-cyan-40);    /* brightest blue spark */
  --color-accent-ink:      var(--ref-azure-30);   /* blue dark enough for text */
  --color-highlight:       var(--ref-gold-40);
  --color-surface-indigo:  var(--ref-indigo-05);  /* deep blue dark surface */

  /* Action / CTA */
  --color-action:          var(--ref-plum-40);
  --color-action-hover:    var(--ref-plum-30);
  --color-on-action:       #FFFFFF;
  --color-action-gold:     var(--ref-gold-40);
  --color-on-action-gold:  var(--ref-ink);      /* NEVER white on gold */

  /* Lines / borders */
  --color-line:            rgba(42,23,33,0.12);
  --color-line-strong:     rgba(42,23,33,0.22);
  --color-line-on-deep:    rgba(247,236,239,0.16);

  /* ---- Opacity scale (apply to any role via color-mix) ---------- */
  --o-04: 0.04; --o-08: 0.08; --o-12: 0.12; --o-20: 0.20;
  --o-40: 0.40; --o-60: 0.60; --o-80: 0.80;

  /* Tinted washes (low-opacity fills for section backgrounds) */
  --wash-plum:   rgba(129,71,102,0.08);
  --wash-rose:   rgba(196,115,151,0.10);
  --wash-cyan:   rgba(81,231,253,0.12);
  --wash-gold:   rgba(242,188,38,0.14);
  --wash-azure:  rgba(47,111,178,0.12);
  --wash-indigo: rgba(23,107,140,0.12);

  /* ---- Monochromatic + brand gradients -------------------------- */
  --grad-plum:       linear-gradient(160deg, var(--ref-plum-30), var(--ref-plum-10));
  --grad-plum-deep:  linear-gradient(180deg, var(--ref-plum-20) 0%, var(--ref-deep) 100%);
  --grad-rose-plum:  linear-gradient(150deg, var(--ref-rose-40) 0%, var(--ref-plum-30) 100%);
  --grad-sunset:     linear-gradient(135deg, var(--ref-gold-40) 0%, var(--ref-rose-40) 55%, var(--ref-plum-40) 100%);
  --grad-dawn:       linear-gradient(135deg, var(--ref-cream-40) 0%, var(--ref-rose-80) 100%);
  --grad-cyan-veil:  radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--ref-cyan-40) 22%, transparent) 0%, transparent 60%);
  --grad-text-overlay: linear-gradient(180deg, rgba(34,18,27,0) 30%, rgba(34,18,27,0.62) 100%);
  --grad-hero-veil:  linear-gradient(180deg, rgba(34,18,27,0.20) 0%, rgba(34,18,27,0.10) 40%, rgba(34,18,27,0.55) 100%);

  /* Blue/turquoise-dominant blends (cyan → dark turquoise → azure → plum) */
  --grad-spectrum:    linear-gradient(135deg, var(--ref-cyan-40) 0%, var(--ref-teal-40) 30%, var(--ref-azure-40) 60%, var(--ref-plum-40) 100%);
  --grad-teal-mono:   linear-gradient(170deg, var(--ref-teal-20) 0%, var(--ref-teal-05) 100%);
  --grad-azure-deep:  linear-gradient(165deg, var(--ref-azure-30) 0%, var(--ref-azure-10) 100%);
  --grad-indigo-deep: linear-gradient(165deg, var(--ref-indigo-30) 0%, var(--ref-indigo-10) 100%);
  --grad-indigo-plum: linear-gradient(150deg, var(--ref-indigo-30) 0%, var(--ref-plum-20) 100%);
  --grad-azure-indigo:linear-gradient(150deg, var(--ref-azure-40) 0%, var(--ref-indigo-30) 100%);
  --grad-ocean:       linear-gradient(180deg, var(--ref-azure-20) 0%, var(--ref-indigo-10) 100%);

  /* Monochromatic page washes (alive, subtle) — radial blooms of a dominant hue */
  --bg-mono-purple: radial-gradient(90% 120% at 15% 0%, color-mix(in srgb, var(--ref-plum-40) 14%, var(--ref-page)) 0%, var(--ref-page) 60%);
  --bg-mono-rose:   radial-gradient(90% 120% at 85% 0%, color-mix(in srgb, var(--ref-rose-40) 16%, var(--ref-page)) 0%, var(--ref-page) 62%);
  --bg-mono-blue:   radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--ref-azure-40) 14%, var(--ref-page)) 0%, var(--ref-page) 60%);

  /* Texture overlay tints (color washes laid OVER a watercolor texture image
     so the photo reads as texture, not subject). Apply via .has-texture. */
  /* Plain rgba() — no color-mix() — so the texture background never invalidates
     on older Safari / webviews. Dark overlays: lighter top → darker bottom. */
  --tex-purple-overlay: linear-gradient(180deg, rgba(77,43,61,0.64), rgba(34,18,27,0.83));
  --tex-rose-overlay:   linear-gradient(180deg, rgba(118,69,91,0.46), rgba(52,28,41,0.72));
  --tex-blue-overlay:   linear-gradient(180deg, rgba(21,50,80,0.50), rgba(6,28,36,0.74));
  --tex-indigo-overlay: linear-gradient(180deg, rgba(16,75,98,0.48), rgba(4,17,22,0.76));
  /* light textured washes — a translucent page-scrim so the BOLD watercolor
     below shows through clearly while keeping the section light for dark text. */
  --tex-purple-light: linear-gradient(180deg, rgba(251,245,238,0.66), rgba(251,245,238,0.78));
  --tex-rose-light:   linear-gradient(180deg, rgba(251,245,238,0.64), rgba(251,245,238,0.76));
  --tex-blue-light:   linear-gradient(180deg, rgba(251,245,238,0.66), rgba(251,245,238,0.78));
  --tex-teal-light:   linear-gradient(180deg, rgba(251,245,238,0.66), rgba(251,245,238,0.78));
  --tex-gold-light:   linear-gradient(180deg, rgba(251,245,238,0.64), rgba(251,245,238,0.76));

  /* Translucent monochromatic veils for PHOTO backgrounds (photo shows ~40-55%
     near the top; text stays legible). Used by .photo-bg + .veil-*. */
  --veil-plum:  linear-gradient(180deg, rgba(52,28,41,0.50) 0%, rgba(34,18,27,0.74) 100%);
  --veil-teal:  linear-gradient(180deg, rgba(6,28,36,0.52) 0%, rgba(4,17,22,0.78) 100%);
  --veil-rose:  linear-gradient(150deg, rgba(118,69,91,0.46) 0%, rgba(52,28,41,0.76) 100%);
  --veil-azure: linear-gradient(180deg, rgba(21,50,80,0.50) 0%, rgba(4,17,22,0.78) 100%);
  --veil-gold:  linear-gradient(160deg, rgba(145,113,23,0.42) 0%, rgba(28,16,22,0.78) 100%);

  /* ---- Typography ----------------------------------------------- */
  --font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --font-plain: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp: min, fluid, max) */
  --t-display:  clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);
  --t-h1:       clamp(2.1rem, 1.4rem + 3.1vw, 4rem);
  --t-h2:       clamp(1.7rem, 1.25rem + 2vw, 2.9rem);
  --t-h3:       clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem);
  --t-lead:     clamp(1.12rem, 1.02rem + 0.5vw, 1.45rem);
  --t-body:     clamp(1rem, 0.97rem + 0.15vw, 1.12rem);
  --t-small:    0.9rem;
  --t-eyebrow:  0.78rem;

  --lh-tight: 1.04;
  --lh-snug:  1.22;
  --lh-body:  1.62;
  --tracking-eyebrow: 0.22em;
  --tracking-brand:   0.04em;

  /* ---- Spacing scale (8pt-ish, fluid section rhythm) ------------ */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-8: 3rem;     --s-10: 4rem;
  --s-12: 6rem;   --s-16: 8rem;
  --section-y: clamp(4rem, 2.5rem + 7vw, 9rem);
  --container:  1200px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);

  /* ---- Shape ----------------------------------------------------- */
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px;
  --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;

  /* ---- Shadow (warm, low) --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(34,18,27,0.06), 0 2px 8px rgba(34,18,27,0.05);
  --shadow-md: 0 6px 18px rgba(34,18,27,0.10), 0 2px 6px rgba(34,18,27,0.06);
  --shadow-lg: 0 24px 60px rgba(34,18,27,0.18);
  --shadow-cyan: 0 0 0 1px color-mix(in srgb, var(--ref-cyan-40) 40%, transparent), 0 8px 30px color-mix(in srgb, var(--ref-cyan-40) 22%, transparent);

  /* ---- Motion ---------------------------------------------------- */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard:   cubic-bezier(0.3, 0, 0.2, 1);
  --dur-fast: 220ms; --dur-med: 420ms; --dur-slow: 720ms;
}