/* ==========================================================================
   CityFoundry AG — Design tokens
   Single source of truth for colour, type, radius, motion.
   Values match the approved design exactly; only the names are new.
   ========================================================================== */

:root {
  /* --- Brand palette (official guidelines) ----------------------------- */
  --cf-cyan:            #00DCB9;   /* Spark Cyan   — accent, CTAs, links   */
  --cf-teal:            #004045;   /* Foundry Teal — brand dark            */
  --cf-yellow:          #F8D500;   /* Bright Ember — secondary accent      */
  --cf-sky:             #BCD8DA;   /* Soft Sky     — muted on dark         */
  --cf-crystal:         #E5F6FF;   /* Crystal Haze — light section bg      */
  --cf-sage:            #D9CE85;   /* Golden Sage  — warm highlight        */

  /* --- Working palette (as used across the design) --------------------- */
  --cf-ink:             #04211F;   /* primary ground + body text           */
  --cf-ink-2:           #0d3a36;   /* raised dark surface / hover          */
  --cf-white:           #ffffff;
  --cf-muted:           #5E8386;   /* secondary text on light              */
  --cf-muted-dark:      #9fbfbc;   /* secondary text on dark               */
  --cf-link:            #00706F;   /* link hover on light backgrounds      */
  --cf-surface:         #F3F7F6;   /* light section background             */
  --cf-surface-2:       #E8F5F3;
  --cf-border:          #A9C8C5;
  --cf-placeholder:     #7fa3a2;
  --cf-alert:           #B4472C;

  /* --- Signature gradient ---------------------------------------------- */
  --cf-grad-1:          #4ED3EA;
  --cf-grad-2:          #C3D5D8;
  --cf-grad-3:          #DACFA0;
  --cf-grad-4:          #EFCB00;
  --cf-gradient:        linear-gradient(90deg,
                          var(--cf-grad-1) 0%, var(--cf-grad-2) 34%,
                          var(--cf-grad-3) 64%, var(--cf-grad-4) 100%);
  --cf-gradient-conic:  conic-gradient(from 200deg,
                          var(--cf-grad-1), var(--cf-grad-2), var(--cf-grad-3),
                          var(--cf-grad-4), var(--cf-grad-1));

  /* --- Hairlines & shadows --------------------------------------------- */
  --cf-line-ink-07:     rgba(4, 33, 31, .07);
  --cf-line-ink-08:     rgba(4, 33, 31, .08);
  --cf-line-ink-10:     rgba(4, 33, 31, .10);
  --cf-line-ink-12:     rgba(4, 33, 31, .12);
  --cf-line-ink-14:     rgba(4, 33, 31, .14);
  --cf-line-ink-16:     rgba(4, 33, 31, .16);
  --cf-line-ink-18:     rgba(4, 33, 31, .18);
  --cf-line-light-10:   rgba(255, 255, 255, .10);
  --cf-line-light-12:   rgba(255, 255, 255, .12);
  --cf-line-light-16:   rgba(255, 255, 255, .16);
  --cf-line-light-20:   rgba(255, 255, 255, .20);
  --cf-line-light-28:   rgba(255, 255, 255, .28);

  /* --- Typography ------------------------------------------------------- */
  --cf-font-head:       'Poppins', sans-serif;
  --cf-font-body:       'DM Sans', sans-serif;
  /* Document default keeps system-ui in the stack as the nearer fallback. */
  --cf-font-doc:        'DM Sans', system-ui, sans-serif;

  /* --- Radius ----------------------------------------------------------- */
  --cf-radius-pill:     999px;
  --cf-radius-lg:       44px;   /* brand asymmetric-corner device */
  --cf-radius-md:       22px;
  --cf-radius-sm:       14px;

  /* --- Motion ----------------------------------------------------------- */
  --cf-ease:            cubic-bezier(.16, 1, .3, 1);
  --cf-ease-in-out:     cubic-bezier(.76, 0, .24, 1);

  /* Scroll-reveal and image-zoom amounts. Pages may tune these locally. */
  --cf-reveal-shift:    28px;
  --cf-reveal-duration: .8s;
  --cf-zoom-scale:      1.06;
  --cf-zoom-duration:   1s;

  /* --- Layout ----------------------------------------------------------- */
  --cf-shell:           1320px;  /* default content max-width */
  --cf-gutter:          40px;
  --cf-gutter-sm:       20px;
}