/* ==========================================================================
   THEME  —  Jones Custom Woodwork
   --------------------------------------------------------------------------
   This file holds EVERY color, font, and size used on the website.
   Nothing else in the site defines a color. If you want to change how the
   site looks, change it here.

   To try a completely different look, open index.html and change this line:
       <link rel="stylesheet" href="theme.css">
   to one of:
       <link rel="stylesheet" href="themes/theme-dark.css">
       <link rel="stylesheet" href="themes/theme-natural.css">

   Colors are named for their JOB (accent, heading, muted), not for the color
   they happen to be. So you can change --color-accent from orange to green
   and nothing is left with a misleading name.
   ========================================================================== */

:root {
  /* --- COLORS ------------------------------------------------------------
     Default palette is pulled from Jeremy's logo:
     charcoal, burnt orange, and the amber/red sunset behind the house.      */

  --color-bg:              #faf6f0;   /* main page background (warm cream)   */
  --color-surface:         #ffffff;   /* cards, popups                       */
  --color-surface-alt:     #f2eae0;   /* every other section, for contrast   */
  --color-text:            #1f1d1b;   /* normal paragraph text               */
  --color-heading:         #3a2a1e;   /* section titles (dark walnut)        */
  --color-muted:           #635a51;   /* captions, small print               */
  --color-border:          #ddd0c0;   /* thin dividing lines                 */

  --color-accent:          #b04a15;   /* buttons + links (logo burnt orange) */
  --color-accent-hover:    #8f3a0f;   /* buttons when hovered/pressed        */
  --color-accent-text:     #ffffff;   /* text sitting ON an accent button    */
  --color-accent-soft:     #f9ede3;   /* pale accent wash for tags/chips     */

  --color-highlight:       #c07d16;   /* focus outline, small flourishes     */

  --color-header-bg:       #1f1d1b;   /* top bar background                  */
  --color-header-text:     #f5efe6;   /* top bar text                        */
  --color-footer-bg:       #1f1d1b;
  --color-footer-text:     #cdc3b6;

  --color-overlay:         rgb(20 17 15 / 0.94);  /* photo viewer backdrop   */
  --color-shade:           rgb(31 29 27 / 0.55);  /* dark wash over photos   */


  /* --- TYPE --------------------------------------------------------------
     System fonts: they load instantly, cost nothing, need no internet
     connection, and are the most readable choice on a phone.               */

  --font-heading: "Bitter", Georgia, "Times New Roman", serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --font-size-base:  1.125rem;   /* 18px — intentionally large, easy to read */
  --font-size-small: 1rem;
  --line-height:     1.65;
  --heading-weight:  700;
  --heading-spacing: -0.01em;


  /* --- SHAPE & DEPTH ------------------------------------------------------ */

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 3px rgb(31 29 27 / 0.08), 0 6px 18px rgb(31 29 27 / 0.07);
  --shadow-lift: 0 4px 10px rgb(31 29 27 / 0.10), 0 14px 34px rgb(31 29 27 / 0.16);
  --shadow-callbar: 0 -2px 14px rgb(31 29 27 / 0.28);

  --border-width: 1px;


  /* --- SPACING & LAYOUT --------------------------------------------------- */

  --space-unit:    8px;    /* all spacing is a multiple of this              */
  --content-max:   1180px; /* widest the text/content ever gets              */
  --section-pad-y: 80px;   /* vertical breathing room between sections       */
  --tap-min:       52px;   /* minimum height of any button — big for thumbs  */


  /* --- MOTION ------------------------------------------------------------- */

  --transition-fast: 140ms ease;
  --transition-slow: 320ms ease;


  /* --- HERO ---------------------------------------------------------------
     How dark to wash the hero photo so white text stays readable on top.    */
  --hero-min-height: 78vh;
}

/* Slightly tighter spacing on small screens. */
@media (max-width: 640px) {
  :root {
    --section-pad-y: 56px;
    --hero-min-height: auto;
  }
}