/* ==========================================================================
   DESIGN TOKENS — Color Point General Printers Ltd
   Brand colors (cream / orange / ink) are LOCKED — real brand identity,
   not a stylistic choice. Everything below derives from them as tints and
   shades. No new hues are introduced anywhere in this codebase.
   ========================================================================== */

:root {
  /* ---- Brand core (do not change) ---- */
  --cp-cream:  #F5EDDF;
  --cp-orange: #F47C20;
  --cp-ink:    #0F0A04;

  /* ---- Cream scale ---- */
  --cream-50:  #FFFEFB;
  --cream-100: #FAF6EE;
  --cream-200: #F5EDDF; /* = brand cream */
  --cream-300: #EBDFC6;
  --cream-400: #DDCBA4;

  /* ---- Orange scale ---- */
  --orange-300: #FF9E52;
  --orange-400: #F47C20; /* = brand orange */
  --orange-500: #D9640F;
  --orange-600: #B14F0A;

  /* ---- Ink scale — never used as a large background fill (brief bans
     dark/black backgrounds); reserved for text, accents, small surfaces ---- */
  --ink-100: #7A6D5C;
  --ink-200: #574A3A;
  --ink-300: #362C20;
  --ink-400: #1D1610;
  --ink-500: #0F0A04; /* = brand ink */

  --white: #FFFFFF;

  /* ---- Semantic ---- */
  --color-bg:           var(--cream-100);
  --color-bg-raised:    var(--white);
  --color-text:         var(--ink-400);
  --color-text-muted:   var(--ink-100);
  --color-text-on-ink:  var(--cream-100);
  --color-accent:       var(--orange-400);
  --color-accent-hover: var(--orange-500);
  --color-border:       rgba(15, 10, 4, 0.1);

  /* ---- Type ----
     Display: Bricolage Grotesque — a grotesque drawn with ink-trap
     notches, the small cuts print type has always used to keep letters
     crisp under ink spread on rough paper. Loaded via Google Fonts link
     in index.html.
     Body: Instrument Sans — quiet and legible, stays out of the way. */
  --font-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-xs:   clamp(0.78rem, 0.75rem + 0.15vw, 0.875rem);
  --fs-sm:   clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-md:   clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
  --fs-lg:   clamp(1.6rem, 1.3rem + 1.5vw, 2.25rem);
  --fs-xl:   clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  --fs-2xl:  clamp(3rem, 1.9rem + 5.2vw, 6rem);
  --fs-3xl:  clamp(3.6rem, 2rem + 7.5vw, 8.5rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* ---- Space ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 5vw, 4.5rem);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.45s;
  --dur-slow: 0.9s;

  /* ---- Elevation ---- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 10px rgba(15, 10, 4, 0.05);
  --shadow-md: 0 12px 32px rgba(15, 10, 4, 0.08);
  --shadow-lg: 0 30px 70px rgba(15, 10, 4, 0.14);
  --shadow-glow: 0 0 0 1px rgba(244, 124, 32, 0.15), 0 12px 40px rgba(244, 124, 32, 0.28);

  /* ---- Z-index ---- */
  --z-bg: 0;
  --z-content: 10;
  --z-nav: 500;
  --z-cursor: 9999;
  --z-preloader: 9500;
}

@media (min-width: 1600px) {
  :root {
    --container-max: 1520px;
  }
}