/*
 * Universal Temple Theme – Design Tokens
 *
 * CSS custom properties that form the single source of truth for the
 * theme's visual system. All component and layout styles reference these
 * tokens rather than hard-coding values.
 *
 * Prefix convention: --utt-
 *
 * Phase 2: Default heritage palette. Per-domain colour overrides are
 * introduced in Phase 4 (theme settings and branding controls).
 *
 * @package UniversalTempleTheme
 * @version 0.2.0
 */

:root {

	/* -------------------------------------------------------------------------
	 * Colours
	 * ---------------------------------------------------------------------- */

	/* Primary – deep maroon */
	--utt-color-primary:        #681F2B;
	--utt-color-primary-hover:  #531825;
	--utt-color-primary-light:  #8A3040;

	/* Accent – antique gold */
	--utt-color-accent:         #B8893D;
	--utt-color-accent-hover:   #9D7432;
	--utt-color-accent-light:   #D4A85A;

	/* Surfaces */
	--utt-color-bg:             #FBF5E9; /* warm ivory – page background */
	--utt-color-surface:        #FFFFFF;
	--utt-color-surface-alt:    #F4ECD8; /* slightly deeper ivory for contrast */

	/* Text */
	--utt-color-text:           #262321; /* charcoal */
	--utt-color-text-muted:     #655F59;
	--utt-color-text-inverse:   #FFFFFF;

	/* Borders */
	--utt-color-border:         #DED4C4;
	--utt-color-border-strong:  #BFB3A0;

	/* Sage accent (secondary tone) */
	--utt-color-sage:           #6F7968;
	--utt-color-sage-light:     #8E9987;

	/* State colours – accessible dark variants to meet contrast on light bg */
	--utt-color-error:          #8B1A1A;
	--utt-color-error-bg:       #FDF2F2;
	--utt-color-success:        #1A5C2E;
	--utt-color-success-bg:     #F2FBF5;

	/* Focus ring */
	--utt-color-focus:          #B8893D;

	/* -------------------------------------------------------------------------
	 * Typography – Font stacks
	 * System fonts only. No remote or bundled font files.
	 * ---------------------------------------------------------------------- */

	--utt-font-heading: Georgia, "Times New Roman", Times, serif;
	--utt-font-body:    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
	                    Roboto, "Helvetica Neue", Arial, sans-serif;
	--utt-font-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
	                    "Liberation Mono", "Courier New", monospace;

	/* -------------------------------------------------------------------------
	 * Typography – Font sizes
	 * Fluid scale using clamp(min, preferred-vw, max).
	 * Keeps headings proportional without extreme mobile sizes.
	 * ---------------------------------------------------------------------- */

	--utt-text-xs:   0.75rem;                                       /* 12 px */
	--utt-text-sm:   0.875rem;                                      /* 14 px */
	--utt-text-base: 1rem;                                          /* 16 px */
	--utt-text-md:   clamp(1rem,    1.5vw + 0.5rem, 1.125rem);     /* 16–18 px */
	--utt-text-lg:   clamp(1.125rem, 2vw + 0.5rem, 1.25rem);       /* 18–20 px */
	--utt-text-xl:   clamp(1.25rem,  2.5vw + 0.5rem, 1.5rem);      /* 20–24 px */
	--utt-text-2xl:  clamp(1.5rem,   3vw + 0.5rem, 1.875rem);      /* 24–30 px */
	--utt-text-3xl:  clamp(1.75rem,  3.5vw + 0.5rem, 2.25rem);     /* 28–36 px */
	--utt-text-4xl:  clamp(2rem,     4vw + 0.5rem, 2.75rem);       /* 32–44 px */

	/* -------------------------------------------------------------------------
	 * Typography – Line heights
	 * ---------------------------------------------------------------------- */

	--utt-leading-tight:   1.25;
	--utt-leading-snug:    1.375;
	--utt-leading-normal:  1.6;
	--utt-leading-relaxed: 1.75;

	/* -------------------------------------------------------------------------
	 * Typography – Font weights
	 * ---------------------------------------------------------------------- */

	--utt-weight-normal:   400;
	--utt-weight-medium:   500;
	--utt-weight-semibold: 600;
	--utt-weight-bold:     700;

	/* -------------------------------------------------------------------------
	 * Spacing scale (4 px grid)
	 * ---------------------------------------------------------------------- */

	--utt-space-1:  0.25rem;  /*  4 px */
	--utt-space-2:  0.5rem;   /*  8 px */
	--utt-space-3:  0.75rem;  /* 12 px */
	--utt-space-4:  1rem;     /* 16 px */
	--utt-space-5:  1.25rem;  /* 20 px */
	--utt-space-6:  1.5rem;   /* 24 px */
	--utt-space-8:  2rem;     /* 32 px */
	--utt-space-10: 2.5rem;   /* 40 px */
	--utt-space-12: 3rem;     /* 48 px */
	--utt-space-16: 4rem;     /* 64 px */
	--utt-space-20: 5rem;     /* 80 px */
	--utt-space-24: 6rem;     /* 96 px */

	/* -------------------------------------------------------------------------
	 * Layout widths
	 * ---------------------------------------------------------------------- */

	--utt-content-width:     720px;   /* article body column */
	--utt-wide-width:        1100px;  /* wide-aligned blocks and containers */
	--utt-container-padding: clamp(1rem, 4vw, 2rem);

	/* -------------------------------------------------------------------------
	 * Border radii
	 * ---------------------------------------------------------------------- */

	--utt-radius-sm:   0.125rem;  /* 2 px */
	--utt-radius-base: 0.25rem;   /* 4 px */
	--utt-radius-md:   0.375rem;  /* 6 px */
	--utt-radius-lg:   0.5rem;    /* 8 px */

	/* -------------------------------------------------------------------------
	 * Borders
	 * ---------------------------------------------------------------------- */

	--utt-border-width:  1px;
	--utt-border:        1px solid var(--utt-color-border);
	--utt-border-strong: 1px solid var(--utt-color-border-strong);

	/* -------------------------------------------------------------------------
	 * Shadows
	 * ---------------------------------------------------------------------- */

	--utt-shadow-sm: 0 1px 2px 0 rgb(38 35 33 / 0.08);
	--utt-shadow-md: 0 2px 8px 0 rgb(38 35 33 / 0.10);
	--utt-shadow-lg: 0 4px 16px 0 rgb(38 35 33 / 0.12);

	/* -------------------------------------------------------------------------
	 * Transitions
	 * ---------------------------------------------------------------------- */

	--utt-transition-fast: 150ms ease;
	--utt-transition-base: 250ms ease;
	--utt-transition-slow: 400ms ease;

	/* -------------------------------------------------------------------------
	 * Z-index layers
	 * ---------------------------------------------------------------------- */

	--utt-z-base:    0;
	--utt-z-raised:  10;
	--utt-z-overlay: 100;
	--utt-z-modal:   200;
	--utt-z-toast:   300;
}