/*
  brand/tokens.css

  The single source of truth for your visual system.
  Edit the values below to match your brand. Every page in your system
  reads from these variables, so changing them here propagates everywhere.

  The defaults below are intentionally tasteful but generic. They will
  not look like you. Run the brand intake conversation
  (guides/22-brand-intake.md, from Module 6) and
  Claude will fill these in from your logo, colors, fonts, and images.

  Default palette uses no borders. Visual separation comes from
  background contrast and rhythm, not lines.
*/

:root {
  /* CORE PALETTE */
  /* Names are the template's; values are KnoxOps & Strategy's.
     linen = soft background, taupe = Coral, aqua = Pop, pacific = Forest, yale = Charcoal. */
  --palette-linen:    #F4F2EC;  /* soft warm off-white, default surface bg */
  --palette-taupe:    #D4967D;  /* Coral, accent */
  --palette-aqua:     #CF7B5A;  /* Pop, deeper coral, fills and progress only. 3.2:1 on white */
  --palette-pacific:  #495A57;  /* Forest, primary button, links. 7.3:1 on white */
  --palette-yale:     #303636;  /* Charcoal, text and dark sections. 12.3:1 on white */

  /* SEMANTIC, what the rest of the system reads */
  --color-primary:     var(--palette-pacific);   /* primary button bg */
  --color-on-primary:  #ffffff;                  /* primary button text, 7.3:1 on Forest */
  --color-accent:      var(--palette-taupe);     /* Coral. 2.5:1 on white, so a fill or large
                                                    decorative accent only. Never text a visitor
                                                    has to read on a light background. Charcoal
                                                    text on Coral is 5.0:1. */
  --color-pop:         var(--palette-aqua);      /* ONLY for fills, progress, active dots */
  --color-text:        var(--palette-yale);
  --color-text-muted:  #5B6664;                  /* 6.0:1 on white, 5.3:1 on bg-soft */
  --color-bg:          #ffffff;
  --color-bg-soft:     var(--palette-linen);
  --color-bg-warm:     #F3E6DF;                  /* warm blush block, Charcoal text 10.1:1 */
  --color-bg-dark:     var(--palette-yale);
  --color-border:      #CFCBC0;                  /* decorative card edge, faint on purpose */
  --color-divider:     #E5E3DC;                  /* faint, only when needed */
  --color-success:     #2F6B4F;                  /* 6.3:1 on white */
  --color-error:       #A23B2A;                  /* 6.6:1 on white */

  /* TYPOGRAPHY
     --font-display: serif voice for h1 titles, brings craft.
     --font-heading: ui-style sans for h2/h3, eyebrows, buttons.
     --font-body:    body copy. */
  --font-display: 'Marcellus', 'Georgia', 'Iowan Old Style', 'Times New Roman', serif;
  --font-heading: 'Marcellus', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --font-weight-heading: 400;   /* Marcellus has one weight; bold would be faked */
  --font-weight-body: 400;
  --font-weight-accent: 400;

  --font-size-base: 17px;
  --line-height-base: 1.65;

  /* SPACING, t-shirt sizes */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* RADIUS, configurable per element */
  --radius-button: 999px;
  --radius-card: 16px;
  --radius-input: 12px;
  --radius-pill: 999px;

  /* SHADOWS, used in place of borders */
  --shadow-card: 0 1px 2px rgba(48, 54, 54, 0.04), 0 8px 24px rgba(48, 54, 54, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(48, 54, 54, 0.06), 0 16px 40px rgba(48, 54, 54, 0.10);

  /* CONTAINER WIDTHS */
  --container-narrow: 720px;
  --container-default: 1120px;
  --container-wide: 1400px;
}

html { font-size: var(--font-size-base); }

body {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background: var(--color-bg);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-text);
  letter-spacing: -0.015em;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { opacity: 0.8; }

img { max-width: 100%; height: auto; display: block; }