/* ============================================================================
   Constant Dullaart — design tokens (from "Constant Dullaart Design System")
   Single source of truth for color + type across portfolio, work page, and CMS.
   Beam/twinkle animation tokens intentionally omitted (not used).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=League+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

@font-face {
  font-family: 'Palatino';
  src: local('Palatino'), local('Palatino Linotype'), local('Book Antiqua'),
       local('URW Palladio L'), local('P052');
  font-display: swap;
}

:root {
  /* ---- core brand ---- */
  --dullbrown:        #7B7568;
  --dullbrown-veil:   rgba(123, 117, 104, 0.80);
  --dullbrown-veil-strong: rgba(123, 117, 104, 0.95);

  /* ---- ink (expressive skin) ---- */
  --ink-light:        rgb(224, 219, 209);
  --ink-white:        #ffffff;
  --ink-dim:          rgba(224, 219, 209, 0.3);

  /* ---- engraving shadow (signature) ---- */
  --shadow-engrave:      -1px -1px 1px brown, 1px 1px 0px #000;
  --shadow-engrave-halo: -1px -1px 1px brown, 1px 1px 0px #000, 0 0 4px rgb(123,117,104);

  /* ---- beveled image border (Web-1.0 frame) ---- */
  --bevel-width: 8px;
  --bevel-top: rgb(214,146,146); --bevel-left: rgb(199,161,161);
  --bevel-bottom: rgb(61,52,52);  --bevel-right: rgb(51,39,39);
  --bevel-top-hi: rgb(237,175,175); --bevel-left-hi: rgb(217,182,182);
  --bevel-bottom-hi: rgb(87,74,74); --bevel-right-hi: rgb(77,58,58);

  /* ---- catalogue skin (portfolio) ---- */
  --cat-bg:        #14110d;
  --cat-ink:       #f3efe6;
  --cat-ink-dim:   rgba(243, 239, 230, 0.45);
  --cat-scrim-left:   linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 42%, rgba(0,0,0,0.05) 100%);
  --cat-scrim-center: rgba(0,0,0,0.45);

  /* ---- reference-document skin (single work) ---- */
  --doc-bg:        #f5f1e8;
  --doc-ink:       #111111;
  --doc-ink-soft:  #555555;
  --doc-marker:    #ffec3d33;

  /* ---- accents (per-load rotation) ---- */
  --accent:        #0000ee;
  --accent-blue:   #0000ee;
  --accent-red:    #7a1212;
  --accent-green:  #1f4d2b;
  --accent-brown:  #4a3a1f;
  --accent-navy:   #003366;
  --link-blue:     #0000ee;

  /* ---- inventory / CMS ---- */
  --cms-bg:        #fafafa;
  --cms-ink:       #111111;
  --cms-topbar:    #222222;
  --cms-topbar-ink:#eeeeee;
  --cms-topbar-who:#99cc99;
  --cms-topbar-scope:#cc9999;
  --cms-bar-btn:   #444444;
  --cms-bar-btn-hi:#666666;
  --cms-new:       #2aa66a;
  --cms-sale:      #cbb56a;
  --cms-sale-tint: rgba(255, 235, 150, 0.25);
  --cms-edit-hi:   #fff6cf;
  --cms-grid:      #d7d7d7;
  --cms-border:    #111111;
  --cms-danger:    #b00000;

  /* ---- type faces ---- */
  --serif:         Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans:          "Helvetica Neue", Helvetica, Arial, sans-serif;
  --meme:          "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --script-cursive:"League Script", cursive;
  --serif-times:   "Times New Roman", Times, serif;
  --serif-georgia: Georgia, "Times New Roman", serif;
  --mono:          "Courier New", Courier, monospace;
  --mono-ui:       ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- type scale ---- */
  --fs-display: 2.5em; --fs-h1: 2em; --fs-h2: 1.5em; --fs-h3: 1.1em;
  --fs-body: 1.1em; --fs-li: 20px; --fs-ref: 10px; --fs-cms: 13px;
  --lh-body: 1.5; --lh-tight: 1.15;
}