/* Design tokens for estebangz.com. Shared by index.html and showcase.html.
   Single source of truth: edit here, never re-declare in a page. */

  /* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root {
    --paper: #F5F3EE;
    --paper-warm: #EEEAE0;
    --paper-card: #FBFAF6;
    --ink: #14151A;
    --ink-soft: #2C2D34;
    --ink-mute: #6B6C75;
    --ink-faint: #A8A6A0;
    --rule: #D9D3C7;
    --rule-strong: #B5AE9F;

    --accent: #00A847;
    --accent-bright: #00C853;
    --accent-soft: #DBEFE2;
    --accent-glow: #C8F2D9;

    --focus: #00A847;
    --shadow: rgba(20, 21, 26, 0.16);
    --shadow-soft: rgba(20, 21, 26, 0.07);
    --px-opacity: 0.55;

    --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
    /* backup: --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; */
    --font-body: 'Geist', -apple-system, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;

    --max: 1180px;
    --gutter: clamp(20px, 5vw, 64px);
    --transition: 0.25s ease;

    /* Signature motion */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Fluid type scale */
    --step-h1: clamp(2.6rem, 6.5vw, 5rem);
    --step-h2: clamp(1.9rem, 4.5vw, 3.1rem);
    --step-section: clamp(70px, 10vw, 130px);
  }

  /* Animatable angle for the signature conic border */
  @property --angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }

  [data-theme="dark"] {
    --paper: #0E0F12;
    --paper-warm: #16181D;
    --paper-card: #181A20;
    --ink: #F2F1EC;
    --ink-soft: #D6D5CF;
    --ink-mute: #9A9A93;
    --ink-faint: #63645E;
    --rule: #2A2C33;
    --rule-strong: #3C3E47;

    --accent: #1FD968;
    --accent-bright: #00E25E;
    --accent-soft: #122A1C;
    --accent-glow: #16341F;

    --focus: #1FD968;
    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-soft: rgba(0, 0, 0, 0.3);
    --px-opacity: 0.72;
  }