/* GENERATED MIRROR — do not edit here. Source: base/tokens.contract.css (saulera-client-starter). Regenerate on change. */
/* base — semantic token CONTRACT (brand-agnostic)
 *
 * This is the interface between the base and any client pack. It declares every semantic
 * token the components in base/components.css reference, with NEUTRAL fallback defaults
 * (greyscale + one plain blue accent, a generic scale). No brand lives here.
 *
 * A client pack (e.g. client/saulera/tokens.css) is loaded AFTER this file and overrides
 * these values with its own. With no pack loaded, the base still renders as a coherent,
 * unbranded neutral theme — proving the base carries structure, not aesthetics.
 *
 * Rule: if base/components.css starts using a new semantic token, declare it HERE too.
 * Brand-specific values (a real palette, fonts, radius, type scale) belong in the pack.
 */

:root {
  /* ---- Colour: foreground / surface (light context) ---- */
  --color-fg:            #1a1a1a;
  --color-fg-muted:      #6b7280;
  --color-bg:            #ffffff;
  --color-bg-surface:    #f4f4f5;
  --color-border:        #d4d4d8;
  --color-border-strong: #1a1a1a;
  --color-white:         #ffffff;

  /* ---- Colour: accent ---- */
  --color-accent:           #2563eb;
  --color-accent-hover:     #1d4ed8;
  --color-accent-active:    #1e40af;
  --color-accent-fg:        #ffffff;
  --color-accent-secondary: #64748b;

  /* ---- Colour: inverse (content on a dark surface) ---- */
  --color-bg-inverse:           #1a1a1a;
  --color-fg-on-inverse:        #f4f4f5;
  --color-fg-on-inverse-strong: #ffffff;
  --color-fg-on-inverse-muted:  color-mix(in srgb, var(--color-fg-on-inverse) 50%, transparent);
  --color-fg-on-inverse-soft:   color-mix(in srgb, var(--color-fg-on-inverse) 82%, transparent);
  --color-inverse-line:         color-mix(in srgb, var(--color-fg-on-inverse) 12%, transparent);
  --color-inverse-wash:         color-mix(in srgb, var(--color-fg-on-inverse) 6%,  transparent);
  --color-on-dark-border:       color-mix(in srgb, var(--color-white) 50%, transparent);

  /* ---- Fonts (neutral system stack; a pack picks real faces) ---- */
  --font-display: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Spacing (generic 4px scale) ---- */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 96px;

  /* ---- Radius (non-zero default: radius is a brand choice, not a base rule) ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  /* --radius-pill: the shape of a control. Declared separately because a brand's control
     shape is a loud, independent decision — saulera maps it to 0, the previous pack to
     6px, Carmoola to 100px — and folding it into --radius-sm would make those three
     indistinguishable. Components use this for buttons, chips and pills only. */
  --radius-pill: 4px;

  /* ---- Shadows (neutral, black-tinted) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10);

  /* ---- Layout ---- */
  --maxw:   1200px;
  --gutter: 24px;

  /* ---- Type ramp (generic modular scale) ---- */
  --type-display: clamp(40px, 6vw, 76px);
  --type-h1:      clamp(32px, 4vw, 56px);
  --type-h2:      clamp(24px, 2.5vw, 34px);
  --type-h3:      20px;
  --type-lead:    clamp(18px, 1.5vw, 22px);
  --type-body:    16px;
  --type-caption: 13px;
  --type-eyebrow: 12px;
}

/* ---- Prototype surface (--t-*): the tokens system/proto.css renders the phone screens from.
   Same contract rule as everything above — neutral defaults here, real values in the pack.
   These used to be hard-coded inside proto.css, which quietly exempted the prototypes from
   a re-skin; declaring them here is what lets one pack swap reach the whole site.

   Declared on :root, NOT on .ot-screen. The phone bezel (.ot-phone) is the parent of the app
   surface and the notes sheet is its sibling, and custom properties only inherit downward —
   scoping these to .ot-screen leaves both of them unable to see --t-frame and --t-shadow-3,
   which renders the prototypes with no device around them. ---- */
:root {
  --t-ink:        #1a1a1a;
  --t-ink-soft:   #6b7280;
  --t-line:       #e4e4e7;
  --t-bg:         #f4f4f5;
  --t-card:       #ffffff;
  --t-core:       #2563eb;   /* primary signal — controls and labels */
  --t-core-soft:  #eaf0ff;
  --t-new:        #7c3aed;   /* second signal */
  --t-new-soft:   #f2ecff;
  --t-new-text:   #6d28d9;
  --t-good:       #0C7B58;
  --t-alert:      #B3261E;
  --t-alert-soft: #FCEBE9;
  --t-good-soft:  #E2F5EE;
  --t-plain-soft: #EEF0F4;
  --t-r:          8px;

  /* device + elevation. The phone bezel is a surface like any other, and its shadow
     carries the brand's ink tint, so both are pack-owned rather than baked into proto.css. */
  --t-frame:    #11141C;
  --t-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.10);
  --t-shadow-3: 0 24px 60px rgba(0, 0, 0, 0.28);
}