/* ============================================================
   Flexus Theme — Design Tokens
   "Warm paper notebook under afternoon sun" — 
   Author: Mauro Gashfix
   --------------------------------------------------------
   Canvas: warm off-white #f6f5f4 · Cards: pure white with
   hairline borders rgba(0,0,0,.08) · One chromatic commitment:
   Flexus Blue #0075de · A rotating cast of accent hues paints
   feature panels (marigold, coral, sky, midnight).
   ============================================================ */

:root {
  /* ---- Core palette ---- */
  --color-notion-blue: #0075de;          /* primary CTA, active nav, links   */
  --color-paper-warmth: #f6f5f4;         /* page canvas                      */
  --color-pure-white: #ffffff;           /* card surfaces                    */
  --color-ink-black: #000000;            /* headings at varying alpha        */

  /* Legacy-compatible names (values re-pointed to the warm system) */
  --color-canvas-white: #ffffff;         /* card / surface white             */
  --color-paper-mist: #efedeb;           /* muted warm surface, hovers       */
  --color-ash: rgba(0, 0, 0, 0.08);      /* hairline border                  */
  --color-ash-solid: #e9e7e4;            /* hairline on images/solid needs   */
  --color-smoke: #d9d6d3;
  --color-pebble: #c9c6c2;
  --color-midnight-ink: #191918;         /* primary text                     */
  --color-charcoal: #111111;             /* headings                         */
  --color-graphite: #615d59;             /* warm body text                   */
  --color-slate: #696969;                /* card body text                   */
  --color-steel: #757575;                /* stone — secondary nav, muted     */
  --color-fog: #787774;                  /* warm muted helper text           */
  --color-silver: #a5a29e;

  /* Blues */
  --color-electric-blue: #0075de;        /* legacy alias of notion-blue      */
  --color-deep-sapphire: #0060b6;        /* hover state of primary           */
  --color-sky-tint: #e6f3fe;             /* ghost CTA background             */
  --color-sky-wash: #62aef0;             /* lightest accent blue             */
  --color-signal-blue: #097fe8;          /* decorative blue                  */

  /* Accent cast — rotate through these for panels, never for buttons */
  --color-marigold: #ffb110;
  --color-coral: #f64932;
  --color-saffron: #e89d01;
  --color-vermillion: #e32d14;
  --color-mocha: #b18164;
  --color-peach: #f6d5b8;                /* hero highlight pill              */
  --color-midnight-brand: #02093a;       /* dark card island                 */

  /* Status hues (functional, unchanged responsibilities) */
  --color-soft-mint: #dcfce7;
  --color-vivid-green: #16a34a;
  --color-tangerine: #ea580c;
  --color-lavender: #7c3aed;
  --color-conic-spectrum: #0075de;
  --gradient-conic-spectrum: linear-gradient(135deg, #0075de 0%, #62aef0 100%);
  --color-primary-action-fill: #0075de;  /* the single filled button color   */

  /* ---- Typography — Families ---- */
  --font-satoshi: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* display (legacy alias) */
  --font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif; /* editorial accent */
  --font-geist-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ---- Typography — Scale (Notion ramp) ---- */
  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: 0.01em;
  --text-body: 14px;
  --leading-body: 1.43;
  --text-body-lg: 16px;
  --leading-body-lg: 1.5;
  --text-body-xl: 18px;
  --leading-body-xl: 1.56;
  --text-subheading: 20px;
  --leading-subheading: 1.3;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.27;
  --tracking-heading-sm: -0.011em;
  --text-heading: 32px;
  --leading-heading: 1.25;
  --tracking-heading: -0.02em;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.03em;
  --text-display-sm: 54px;
  --leading-display-sm: 1.04;
  --tracking-display-sm: -0.035em;
  --text-display: 60px;
  --leading-display: 1.05;
  --tracking-display: -0.028em;
  --text-display-lg: 76px;
  --leading-display-lg: 1.04;
  --tracking-display-lg: -0.036em;

  /* ---- Typography — Weights ---- */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ---- Spacing ---- */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;

  /* ---- Layout ---- */
  --page-max-width: 1240px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 8px;
  --header-height: 64px;

  /* ---- Border Radius ---- */
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-2xl-2: 20px;
  --radius-full: 9999px;

  /* Named radii */
  --radius-tags: 9999px;
  --radius-cards: 12px;
  --radius-inputs: 8px;
  --radius-buttons: 8px;
  --radius-largecards: 16px;

  /* ---- Shadows (used sparingly: nav + product mockups only) ---- */
  --shadow-subtle: 0px 0.7px 1.5px rgba(0, 0, 0, 0.015), 0px 3px 9px rgba(0, 0, 0, 0.03);
  --shadow-sm: rgba(0, 0, 0, 0.08) 0px 4px 12px;
  --shadow-sm-2: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.1) 0px 4px 12px 0px;
  --shadow-md: rgba(0, 0, 0, 0.08) 0px 10px 24px -4px;
  --shadow-lg: rgba(0, 0, 0, 0.12) 0px 20px 40px -8px;
  --shadow-subtle-3: rgb(255, 255, 255) 0px 0px 0px 3px, rgb(0, 0, 0) 0px 0px 0px 4px;

  /* ---- Surfaces ---- */
  --surface-page: #f6f5f4;               /* level 0 — warm canvas            */
  --surface-canvas: #f6f5f4;
  --surface-paper: #efedeb;
  --surface-card: #ffffff;               /* level 1 — white card             */
  --surface-accent: #ffb110;             /* level 2 — accent panel           */
  --surface-dark: #02093a;               /* level 3 — midnight island        */
  --surface-tinted-accent: #e6f3fe;
}