/* =============================================================
   DESIGN TOKENS
   The single source of truth for colour, type, spacing, radius,
   container widths and motion. Nothing in the portfolio should
   hardcode a value that belongs here.
   ============================================================= */

:root {
  /* ---------------------------------------------------------
     Colour — a neutral system that frames the work.
     Names mirror the Principles document.
     --------------------------------------------------------- */
  --color-bg:              #FCFBF8; /* Porcelain — warm off-white */
  --color-text:            #1C1C1A; /* Carbon Black — headings, key text */
  --color-text-secondary:  #6F6B64; /* Dim Grey — support, metadata */
  --color-surface:         #E7E3DB; /* Soft Linen — cards, dividers, hover */
  --color-accent:          #A44A3F; /* Terracotta — the one identity accent */

  /* Derived tones — kept minimal and predictable */
  --color-accent-hover:    #8C3E34; /* darker terracotta for hover feedback */
  --color-surface-soft:    #F1EEE8; /* a lighter linen for large fills */
  --color-hover:           #EFEBE3; /* subtle hover wash */
  --color-border:          rgba(28, 28, 26, 0.10); /* hairline dividers */
  --color-border-strong:   rgba(28, 28, 26, 0.16);
  --color-on-accent:       #FCFBF8; /* text sitting on the accent */

  /* Focus ring — visible, accessible, quiet */
  --focus-ring: 0 0 0 3px rgba(164, 74, 63, 0.35);

  /* ---------------------------------------------------------
     Typography
     TODO(typeface): Font family is not defined in the Phase-1
     documents. Inter (text) + Fraunces (display) are carried
     over from the prior identity as a considered default and
     loaded in index.html. Confirm or replace before launch.
     --------------------------------------------------------- */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* Fluid type scale — mobile-first, grows gently toward desktop.
     Used through named roles, not raw sizes, wherever possible. */
  --text-xs:      0.75rem;   /* 12px — labels, eyebrows */
  --text-sm:      0.875rem;  /* 14px — metadata, captions */
  --text-base:    1rem;      /* 16px — body */
  --text-md:      1.0625rem; /* 17px — comfortable body */
  --text-lg:      clamp(1.125rem, 1rem + 0.6vw, 1.375rem);  /* lead paragraph */
  --text-xl:      clamp(1.375rem, 1.2rem + 1vw, 1.75rem);   /* small headings */
  --text-2xl:     clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);   /* section titles */
  --text-display: clamp(2.75rem, 2rem + 4.2vw, 4.75rem);    /* hero name */

  /* Line-height roles */
  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.6;

  /* Letter-spacing roles */
  --tracking-eyebrow: 0.12em;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Measure — comfortable reading line length */
  --measure: 62ch;

  /* ---------------------------------------------------------
     Spacing — a predictable rhythm (base 4px)
     --------------------------------------------------------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */

  /* Vertical breathing room for a full section — fluid */
  --section-gap: clamp(4rem, 8vw, 8rem);

  /* ---------------------------------------------------------
     Radius — soft but restrained
     --------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 999px;

  /* ---------------------------------------------------------
     Container — content width and page gutters
     --------------------------------------------------------- */
  --container:      1120px;
  --container-wide: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  /* ---------------------------------------------------------
     Elevation — used only where separation genuinely helps
     --------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(28, 28, 26, 0.04);
  --shadow-md: 0 8px 24px -12px rgba(28, 28, 26, 0.18);
  --shadow-lg: 0 18px 48px -20px rgba(28, 28, 26, 0.22);

  /* ---------------------------------------------------------
     Motion — subtle by mandate
     --------------------------------------------------------- */
  --dur-fast: 180ms;
  --dur:      280ms;
  --dur-slow: 560ms;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);   /* standard */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);  /* gentle deceleration */

  /* Sticky navigation height — referenced for scroll offsets */
  --nav-height: 64px;
}