/* ==========================================================================
   tokens.css — Design system primitives
   The single source of truth for the visual language. Change a value here and
   it propagates everywhere. Nothing in this file styles an element directly;
   it only declares custom properties (design tokens).
   ========================================================================== */

:root {
  /* ---- Color: palette -------------------------------------------------- */
  --c-paper:          #F5F5F0; /* page + card background                    */
  --c-ink:            #111111; /* primary text, headings, borders           */
  --c-signal:         #E8200A; /* accent: CTAs, labels, timeline, hover     */
  --c-signal-dark:    #C41A08; /* accent hover/pressed                      */
  --c-white:          #FFFFFF;

  /* ---- Color: text scale ---------------------------------------------- */
  --c-text:           #222222; /* body copy                                 */
  --c-text-muted:     #666666; /* descriptions                             */
  --c-text-subtle:    #888888; /* meta / secondary                          */
  --c-text-bullet:    #333333; /* list item copy                            */
  --c-placeholder:    #A8A196; /* portrait label, eyebrow                   */

  /* ---- Color: lines --------------------------------------------------- */
  --c-rule:           #C9C3B8; /* section divider on paper                  */
  --c-rule-soft:      #D5CFC5; /* list separators                          */
  --c-rule-strong:    #D3CDC3; /* timeline spine                           */
  --c-border-nav:     #DCD7CD; /* header underline                         */
  --c-portrait-edge:  #D8D3C9;

  /* ---- Color: dark (contact) section ---------------------------------- */
  --c-dark-bg:        #111111;
  --c-dark-text:      #F4F1EB;
  --c-dark-input:     #EDEAE4;
  --c-dark-rule:      #34302A;
  --c-dark-rule-2:    #2A2620;
  --c-dark-rule-3:    #39342E;
  --c-dark-field:     #4A443C;
  --c-dark-label:     #6F685E;
  --c-dark-foot:      #5C564D;
  --c-dark-placeholder:#6C655B;

  /* ---- Typography: families ------------------------------------------- */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Typography: fluid display scale -------------------------------- */
  --fs-hero:        clamp(64px, 11.5vw, 158px);
  --fs-display:     clamp(48px, 7.5vw, 90px);  /* big section headings      */
  --fs-h2:          clamp(44px, 5.5vw, 60px);  /* standard section heading  */
  --fs-h2-sm:       clamp(40px, 4.6vw, 54px);  /* skills heading            */
  --fs-h2-contact:  clamp(48px, 7vw, 80px);
  --fs-quote:       clamp(26px, 2.5vw, 32px);
  --fs-subtitle:    clamp(13px, 1.7vw, 19px);

  /* ---- Typography: fixed steps ---------------------------------------- */
  --fs-role:        32px; /* cv entry / experience role title              */
  --fs-skill-title: 22px;
  --fs-lead:        21px; /* hero paragraph                                */
  --fs-body:        18px;
  --fs-bullet:      15px;
  --fs-desc:        14px;
  --fs-label:       11px; /* mono section labels                           */
  --fs-meta:        12px;
  --fs-btn:         14px;

  /* ---- Typography: weights & spacing ---------------------------------- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  --ls-tight:  -0.012em;
  --ls-label:   0.26em;
  --ls-eyebrow: 0.34em;
  --ls-mono:    0.16em;
  --ls-nav:     0.22em;
  --ls-logo:    0.28em;

  --lh-tight: 0.9;
  --lh-snug:  1.16;
  --lh-body:  1.62;
  --lh-list:  1.55;

  /* ---- Spacing scale (4px base) --------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  22px;
  --space-6:  30px;
  --space-7:  46px;
  --space-8:  60px;
  --space-9:  78px;
  --space-section: 84px;  /* vertical rhythm between sections             */

  /* ---- Layout --------------------------------------------------------- */
  --container:    1536px;
  --gutter:       32px;
  --gutter-sm:    18px;
  --header-h:     67px;
  --measure:      560px;  /* readable paragraph width                     */
  --timeline-gap: 80px;

  /* ---- Effects -------------------------------------------------------- */
  --blur-nav: 10px;
  --tap-min:  44px;       /* minimum touch target                         */
  --transition: 0.2s ease;
}