/**
 * Edmonton City Homes – Design Tokens
 * assets/css/tokens.css
 *
 * This file defines every "design token" for the site — the single source of truth
 * for colour, typography, spacing, and motion values. Nothing here renders anything
 * visible on its own; it just declares named variables that every other CSS file
 * can reference. Changing a value here changes it everywhere at once.
 *
 * All tokens live inside :root { } so they are available (scoped to the document root)
 * on every element in the page.
 *
 * Naming philosophy: tokens use semantic role names ("--color-ink") rather than raw
 * value names ("--color-navy-800"). This means when you read a class like
 * `color: var(--color-ink-soft)` you immediately know the intent — secondary text —
 * without having to decode a colour number.
 */

:root {

  /* ============================================================
     COLOURS — Semantic Roles
     ============================================================
     "Ink" tokens govern text and foreground elements.
     "Surface" tokens govern backgrounds and containers.
     "Border" tokens govern lines and dividers.
     "Accent" is the single brand colour — use it sparingly.
     ============================================================ */

  /* --- Ink (foreground / text) --- */
  --color-ink-strong:   #0a1628;              /* Deep navy — primary headlines, logotype */
  --color-ink:          #1e3150;              /* Body text, primary UI elements */
  --color-ink-soft:     #4a5f7f;              /* Secondary text, meta info, captions */
  --color-ink-faint:    #8d9db1;              /* Disabled states, placeholder text, hints */
  --color-ink-inverse:  #ffffff;              /* White text for use on dark backgrounds */

  /* --- Surface (backgrounds / containers) --- */
  --color-surface:          #ffffff;          /* Default page and card background */
  --color-surface-elevated: #f8fafc;          /* Subtle panel / alternate row background */
  --color-surface-sunken:   #f0f3f7;          /* Sunken sections, inset content areas */
  --color-surface-inverse:  #0a1628;          /* Dark section backgrounds (e.g. footer) */

  /* --- Border --- */
  --color-border:        #dce3ec;             /* Default dividers and input borders */
  --color-border-strong: #b5c0d0;             /* Emphasized borders, active input rings */

  /* --- Accent — the one brand colour; resist overusing it --- */
  --color-accent:      #0e7490;              /* Cyan-teal — matches H&G brokerage palette */
  --color-accent-hover: #0891b2;             /* Brighter teal for hover states */
  --color-accent-soft:  rgba(14, 116, 144, 0.10); /* Tinted background for focus rings */

  /* --- Status / Utility --- */
  --color-warning: #fbbf24;                  /* Amber — warnings and highlights only */


  /* ============================================================
     TYPOGRAPHY
     ============================================================
     Two typefaces:
       Fraunces — a display serif with optical-size axis; used for headlines.
       Inter     — a clean sans-serif; used for all body and UI text.

     The type scale uses rem (relative to the 16px browser default) so users
     who change their browser font size get proportionally scaled text.
     Fluid sizes use clamp(min, preferred, max) so they scale smoothly with
     the viewport width instead of jumping at breakpoints.
     ============================================================ */

  /* --- Font families --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- Type scale ---
     Each step is named for its role, not its pixel size.
     The rem values and their approximate pixel equivalents are noted inline. */
  --text-xs:   0.8125rem;                         /*  13px — labels, meta, fine print */
  --text-sm:   0.9375rem;                         /*  15px — UI chrome, nav, small body */
  --text-base: 1.125rem;                          /*  18px — body paragraphs */
  --text-lg:   1.375rem;                          /*  22px — lead paragraphs, large UI */
  --text-xl:   clamp(1.75rem,  3vw,  2.25rem);   /*  28–36px — h3, section subheads */
  --text-2xl:  clamp(2.25rem,  4.5vw, 3.25rem);  /*  36–52px — h2, section headlines */
  --text-3xl:  clamp(3rem,     7vw,   5.25rem);  /*  48–84px — h1, hero headings */

  /* --- Line heights ---
     Tighter for large display text (less visual gap between lines at big sizes);
     looser for small body text (more breathing room for readability). */
  --leading-tight:   1.15;   /* Headlines */
  --leading-snug:    1.35;   /* Subheadings */
  --leading-normal:  1.5;    /* UI elements */
  --leading-relaxed: 1.7;    /* Body paragraphs */

  /* --- Font weights ---
     Inter supports all four. Fraunces is a variable font; these map to its weight axis. */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;


  /* ============================================================
     SPACING — 8-point scale
     ============================================================
     All spacing values are multiples of 4px (0.25rem), following the
     industry-standard "8-point grid". Consistent spacing prevents the
     visual noise that comes from arbitrary pixel values scattered through CSS.

     Use these tokens for margin, padding, gap, and layout measurements.
     ============================================================ */

  --space-1:  0.25rem;   /*   4px — hairline gap, icon padding */
  --space-2:  0.5rem;    /*   8px — tight internal padding */
  --space-3:  1rem;      /*  16px — default element spacing */
  --space-4:  1.5rem;    /*  24px — roomy component padding */
  --space-5:  2rem;      /*  32px — section padding (mobile) */
  --space-6:  3rem;      /*  48px — generous section gap */
  --space-7:  4rem;      /*  64px — section rhythm / vertical breathing */
  --space-8:  6rem;      /*  96px — section padding (desktop) */
  --space-9:  8rem;      /* 128px — large section dividers, hero padding */


  /* ============================================================
     BORDER RADIUS
     ============================================================
     Consistent corner rounding. Smaller radii for tight UI elements
     (inputs, tags); larger for cards and modals; --radius-full for pills.
     ============================================================ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 999px;  /* Fully rounded — pill buttons, avatar badges */


  /* ============================================================
     SHADOWS — Elevation system
     ============================================================
     Shadows communicate depth. Use lighter shadows for subtle lift (cards),
     heavier shadows for elements that float above the page (modals, dropdowns).
     --shadow-focus is used exclusively for keyboard-focus rings.
     ============================================================ */

  --shadow-xs:    0 1px  2px  rgba(10, 22, 40, 0.04);  /* Barely lifted — image frames */
  --shadow-sm:    0 2px  8px  rgba(10, 22, 40, 0.06);  /* Cards at rest */
  --shadow-md:    0 8px  24px rgba(10, 22, 40, 0.08);  /* Cards on hover, popovers */
  --shadow-lg:    0 16px 48px rgba(10, 22, 40, 0.12);  /* Modals, sticky headers */
  --shadow-focus: 0 0 0  4px  rgba(14, 116, 144, 0.15); /* Keyboard focus ring (cyan-teal) */


  /* ============================================================
     MOTION — Easing & Duration
     ============================================================
     Two easing curves:
       --ease-snappy: fast in, soft out — feels crisp for button presses, toggles.
       --ease-smooth: standard material-style curve — for larger transitions.

     Durations are deliberately short. Real-world UI should feel instant;
     animation that lingers becomes a usability tax.
     ============================================================ */

  --ease-snappy: cubic-bezier(0.2, 0.7, 0.2, 1);   /* UI interactions (hover, press) */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);      /* Larger transitions (panel open) */

  --duration-fast: 150ms;   /* Micro-interactions: hover colour, icon swap */
  --duration-base: 250ms;   /* Standard transitions: button, input focus */
  --duration-slow: 400ms;   /* Page-level transitions: modal, drawer */


  /* ============================================================
     LAYOUT — Container widths
     ============================================================
     Three named container widths cover the main layout needs:
       narrow  — long-form editorial content (blog posts, legal pages)
       default — standard page content
       wide    — full-bleed photo grids, data tables
     ============================================================ */

  --container-max:    1280px;   /* Default content container */
  --container-narrow:  820px;  /* Editorial / reading-width columns */
  --container-wide:   1400px;  /* Wide layouts, full-bleed sections */

}