/* ==========================================================================
   Zariya brand tokens  v1.0  FINAL
   Use:  <html data-brand="studio">  then read ONLY --brand-* tokens, plus the
   shared --space / --text / --font / --a / --dur tokens. Do not write hex codes.
   Every site keeps its own small fallback palette in case this file is
   unreachable (master rule 12):  var(--brand-text, #1B1A18)
   Light mode only. Square corners. Fonts: link fonts.css once files are uploaded.

   THE ONE RULE ABOUT SIMILAR COLOURS
   Static surfaces and text use only the named colours below.
   Interactive or scroll-bound elements (buttons, links, rows, headers, overlays)
   may use: the hover and active tokens, disabled opacity, and the alpha ladder
   --a-4 ... --a-80 applied to a brand rgb token. Nothing else.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Palette primitives: final names ---- */
  --z-red: #BE2E14;  /* Brand red */
  --z-navy: #012745;  /* Brand navy */
  --z-amber: #DA8F0E;  /* Brand amber */
  --z-cream: #E7E4DC;  /* Brand cream */
  --z-paper: #FBF8EF;  /* Raised light surface */
  --z-mist: #ECE9E1;  /* Soft light fill */
  --z-line: #D8D4C9;  /* Hairlines on light */
  --z-stone: #BDB8AB;  /* Muted fill, muted text on graphite */
  --z-mute-light: #9A968C;  /* Secondary text on dark only */
  --z-mute: #55524A;  /* Secondary text on light */
  --z-graphite: #3A3833;  /* Raised dark surface */
  --z-ink: #1B1A18;  /* Text on light, dark surface */
  --z-white: #FFFFFF;  /* Pure white (labels on fills) */
  --z-red-deep: #9C2410;  /* Hover, error, small red text */
  --z-brown: #8B5A2B;  /* Brass, Library primary, Academy accent */
  --z-sky: #BFD3E0;  /* Pale blue tint */

  /* ---- Logo-only colours (supplied logos; not for site UI) ---- */
  --z-logo-slate: #343546;
  --z-logo-ring:  #253642;
  --z-logo-mark:  #BA3B2C;

  /* ---- States: on light and on dark surfaces ---- */
  --state-success: #2A6E37;
  --state-error: #9C2410;
  --state-warning-bg: #DA8F0E;
  --state-warning-text: #1B1A18;
  --state-info: #012745;
  --state-success-on-dark: #7CC592;
  --state-error-on-dark: #F0907A;
  --state-warning-on-dark: #DA8F0E;
  --state-info-on-dark: #BFD3E0;

  /* ---- Type families ---- */
  --font-cormorant-garamond: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-bricolage-grotesque: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ibm-plex-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-ibm-plex-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ---- Type scale ---- */
  --text-xs: 0.75rem;  --text-sm: 0.875rem;  --text-base: 1rem;  --text-md: 1.125rem;
  --text-lg: 1.25rem;  --text-xl: 1.5rem;    --text-2xl: 2rem;
  --text-3xl: clamp(2.25rem, 1.6rem + 2.5vw, 3rem);
  --text-4xl: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);
  --leading-tight: 1.1;  --leading-snug: 1.25;  --leading-normal: 1.55;  --leading-loose: 1.7;
  --tracking-label: 0.08em;  --tracking-caps: 0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem;
  --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;

  /* ---- Shape, layout, focus ---- */
  --radius: 0;  --radius-round: 50%;  --border-w: 1px;
  --content-max: 1120px;  --gutter: clamp(1rem, 4vw, 2rem);
  --focus-width: 2px;  --focus-offset: 2px;

  /* ---- Fade ladder: the only transparencies allowed, on interactive or scroll-bound elements ---- */
  --a-4: .04; --a-8: .08; --a-12: .12; --a-16: .16; --a-24: .24; --a-40: .40; --a-60: .60; --a-80: .80;
  --disabled-opacity: .4;
  --scroll-distance: 80px;     /* header fades in over the first 80px of scroll */
  --scroll-scrim-alpha: .92;   /* header background at full scroll */
  --image-scrim-alpha: .60;    /* scrim behind text on photos */

  /* ---- Motion ---- */
  --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms;
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root, [data-brand] { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --brand-dur: 0ms; }
}

/* Shared focus behaviour (only where data-brand is set) */
[data-brand] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--brand-focus);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   The Zariya Collective  (The Sage-Ruler: calm authority)
   Cream and ink read as timeless and trustworthy. Red appears once per screen, so it always means "this matters". Amber adds warmth without noise.
   ========================================================================== */
[data-brand="collective"] {
  --brand-bg: var(--z-cream);
  --brand-bg-alt: var(--z-paper);
  --brand-surface: var(--z-paper);
  --brand-text: var(--z-ink);
  --brand-text-muted: var(--z-mute);
  --brand-line: var(--z-line);
  --brand-primary: var(--z-red);
  --brand-primary-contrast: var(--z-white);
  --brand-accent: var(--z-amber);
  --brand-accent-2: var(--z-mute);
  --brand-link: var(--z-red);
  --brand-link-hover: var(--z-red-deep);
  --brand-focus: var(--z-red);
  --brand-theme-color: var(--z-cream);
  --brand-primary-hover: #A72812;
  --brand-primary-active: #942410;
  --brand-surface-hover: #F0EDE4;
  --brand-text-rgb: 27 26 24;
  --brand-bg-rgb: 231 228 220;
  --brand-primary-rgb: 190 46 20;
  --brand-accent-rgb: 218 143 14;
  --brand-success: var(--state-success);
  --brand-error: var(--state-error);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info);
  --brand-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --brand-font-body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 480ms;
  --brand-ease: cubic-bezier(.2,0,0,1);
}

/* ==========================================================================
   Zariya Design Studio  (The Creator-Magician: quiet mastery)
   A dark canvas narrows attention to the drawing or render, so work glows. Amber is lamp light: warm, human, inviting. Red is held back for fills so the page never shouts.
   ========================================================================== */
[data-brand="studio"] {
  --brand-bg: var(--z-ink);
  --brand-bg-alt: var(--z-cream);
  --brand-surface: var(--z-graphite);
  --brand-text: var(--z-cream);
  --brand-text-muted: var(--z-mute-light);
  --brand-line: var(--z-graphite);
  --brand-primary: var(--z-amber);
  --brand-primary-contrast: var(--z-ink);
  --brand-accent: var(--z-red);
  --brand-accent-2: var(--z-stone);
  --brand-link: var(--z-amber);
  --brand-link-hover: var(--z-cream);
  --brand-focus: var(--z-amber);
  --brand-theme-color: var(--z-ink);
  --brand-primary-hover: #DF9F30;
  --brand-primary-active: #E4AC4D;
  --brand-surface-hover: #43413B;
  --brand-text-rgb: 231 228 220;
  --brand-bg-rgb: 27 26 24;
  --brand-primary-rgb: 218 143 14;
  --brand-accent-rgb: 190 46 20;
  --brand-success: var(--state-success-on-dark);
  --brand-error: var(--state-error-on-dark);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info-on-dark);
  --brand-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --brand-font-body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 480ms;
  --brand-ease: cubic-bezier(.2,0,0,1);
}

/* ==========================================================================
   The Zariya Academy  (The Hero-Mentor: demanding and warm)
   Red and amber are the colours of heat, appetite and urgency, so they carry the enrol action. Mono type signals rigour: this is a craft with numbers. Paper keeps it human.
   ========================================================================== */
[data-brand="academy"] {
  --brand-bg: var(--z-paper);
  --brand-bg-alt: var(--z-cream);
  --brand-surface: var(--z-cream);
  --brand-text: var(--z-ink);
  --brand-text-muted: var(--z-mute);
  --brand-line: var(--z-line);
  --brand-primary: var(--z-red);
  --brand-primary-contrast: var(--z-white);
  --brand-accent: var(--z-amber);
  --brand-accent-2: var(--z-brown);
  --brand-link: var(--z-red);
  --brand-link-hover: var(--z-red-deep);
  --brand-focus: var(--z-red);
  --brand-theme-color: var(--z-cream);
  --brand-primary-hover: #A72812;
  --brand-primary-active: #942410;
  --brand-surface-hover: #DDDAD2;
  --brand-text-rgb: 27 26 24;
  --brand-bg-rgb: 251 248 239;
  --brand-primary-rgb: 190 46 20;
  --brand-accent-rgb: 218 143 14;
  --brand-success: var(--state-success);
  --brand-error: var(--state-error);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info);
  --brand-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --brand-font-body: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 140ms;
  --brand-ease: cubic-bezier(.2,0,0,1);
}

/* ==========================================================================
   Aayaam  (The Guide-Sage: exact and helpful)
   Indigo signals expertise and calm. The single terracotta dimension line is the human mark: it is the measure, and the thing you act on. Parchment reads like good drawing paper.
   ========================================================================== */
[data-brand="aayaam"] {
  --aay-indigo: #1C2B4A;
  --aay-parchment: #F4F2EE;
  --aay-paper: #FBFAF7;
  --aay-mist: #E1E5EE;
  --aay-line: #C9CED8;
  --aay-haze: #A9B3C6;
  --aay-steel: #6E7A92;
  --aay-mute: #5B6578;
  --aay-terracotta: #C1602E;
  --aay-terracotta-strong: #A04A1B;
  --aay-terracotta-light: #E08A5C;
  --brand-bg: var(--aay-parchment);
  --brand-bg-alt: var(--aay-paper);
  --brand-surface: var(--aay-paper);
  --brand-text: var(--aay-indigo);
  --brand-text-muted: var(--aay-mute);
  --brand-line: var(--aay-line);
  --brand-primary: var(--aay-indigo);
  --brand-primary-contrast: var(--aay-parchment);
  --brand-accent: var(--z-amber);
  --brand-accent-2: var(--aay-terracotta);
  --brand-link: var(--aay-terracotta-strong);
  --brand-link-hover: var(--aay-indigo);
  --brand-focus: var(--aay-indigo);
  --brand-theme-color: var(--aay-parchment);
  --brand-primary-hover: #3C4963;
  --brand-primary-active: #576279;
  --brand-surface-hover: #F0F0EE;
  --brand-text-rgb: 28 43 74;
  --brand-bg-rgb: 244 242 238;
  --brand-primary-rgb: 28 43 74;
  --brand-accent-rgb: 218 143 14;
  --brand-success: var(--state-success);
  --brand-error: var(--state-error);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info);
  --brand-font-heading: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 240ms;
  --brand-ease: cubic-bezier(.2,0,0,1);
}

/* ==========================================================================
   Zariya Hub  (The Host-Explorer: curious and generous)
   A deep navy night makes images luminous, like a gallery after hours. Amber is the reward colour: save, like, join. Verdigris, the green patina of aged copper, marks anything alive or new, so belonging feels organic, not corporate.
   ========================================================================== */
[data-brand="hub"] {
  --hub-night: #001B33;
  --hub-dusk: #0B3A5E;
  --hub-dusk-line: #1E4D73;
  --hub-fog: #9FB7C8;
  --hub-verdigris: #5FB3A5;
  --brand-bg: var(--hub-night);
  --brand-bg-alt: var(--z-navy);
  --brand-surface: var(--hub-dusk);
  --brand-text: var(--z-cream);
  --brand-text-muted: var(--hub-fog);
  --brand-line: var(--hub-dusk-line);
  --brand-primary: var(--z-amber);
  --brand-primary-contrast: var(--z-ink);
  --brand-accent: var(--hub-verdigris);
  --brand-accent-2: var(--z-sky);
  --brand-link: var(--hub-verdigris);
  --brand-link-hover: var(--z-cream);
  --brand-focus: var(--z-amber);
  --brand-theme-color: var(--hub-night);
  --brand-primary-hover: #DF9F30;
  --brand-primary-active: #E4AC4D;
  --brand-surface-hover: #164264;
  --brand-text-rgb: 231 228 220;
  --brand-bg-rgb: 0 27 51;
  --brand-primary-rgb: 218 143 14;
  --brand-accent-rgb: 95 179 165;
  --brand-success: var(--state-success-on-dark);
  --brand-error: var(--state-error-on-dark);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info-on-dark);
  --brand-font-heading: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-body: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 240ms;
  --brand-ease: cubic-bezier(.34,1.56,.64,1);
}

/* ==========================================================================
   Zariya Tools  (The Craftsman-Caregiver: dependable and fast)
   Blueprint paper is the native visual language of architects, so the tool feels familiar before it is used. A light, cool field is easy on the eyes during long data entry. Red is reserved for the redline: only errors and deletions, so it never loses meaning.
   ========================================================================== */
[data-brand="tools"] {
  --tools-paper: #F2F6F9;
  --tools-grid: #D5E2EC;
  --tools-line: #C3D3E0;
  --tools-slate: #4B5F72;
  --tools-blue: #0A4A7C;
  --brand-bg: var(--tools-paper);
  --brand-bg-alt: var(--z-white);
  --brand-surface: var(--z-white);
  --brand-text: var(--z-navy);
  --brand-text-muted: var(--tools-slate);
  --brand-line: var(--tools-line);
  --brand-primary: var(--z-navy);
  --brand-primary-contrast: var(--z-white);
  --brand-accent: var(--z-red);
  --brand-accent-2: var(--z-sky);
  --brand-link: var(--tools-blue);
  --brand-link-hover: var(--z-red);
  --brand-focus: var(--tools-blue);
  --brand-theme-color: var(--tools-paper);
  --brand-primary-hover: #25455F;
  --brand-primary-active: #435F75;
  --brand-surface-hover: #F2F4F6;
  --brand-text-rgb: 1 39 69;
  --brand-bg-rgb: 242 246 249;
  --brand-primary-rgb: 1 39 69;
  --brand-accent-rgb: 190 46 20;
  --brand-success: var(--state-success);
  --brand-error: var(--state-error);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info);
  --brand-font-heading: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 80ms;
  --brand-ease: cubic-bezier(.2,0,0,1);
}

/* ==========================================================================
   Aayaam Object Library  (The Curator-Sage: orderly and trustworthy)
   Warm archival paper and brass say permanence and craft: this is a reference you can rely on. Sky tags classify calmly. Navy is the verification mark and appears only on verified entries.
   ========================================================================== */
[data-brand="library"] {
  --brand-bg: var(--z-paper);
  --brand-bg-alt: var(--z-cream);
  --brand-surface: var(--z-white);
  --brand-text: var(--z-ink);
  --brand-text-muted: var(--z-mute);
  --brand-line: var(--z-line);
  --brand-primary: var(--z-brown);
  --brand-primary-contrast: var(--z-white);
  --brand-accent: var(--z-sky);
  --brand-accent-2: var(--z-navy);
  --brand-link: var(--z-brown);
  --brand-link-hover: var(--z-ink);
  --brand-focus: var(--z-brown);
  --brand-theme-color: var(--z-paper);
  --brand-primary-hover: #7A4F26;
  --brand-primary-active: #6C4622;
  --brand-surface-hover: #F4F4F3;
  --brand-text-rgb: 27 26 24;
  --brand-bg-rgb: 251 248 239;
  --brand-primary-rgb: 139 90 43;
  --brand-accent-rgb: 191 211 224;
  --brand-success: var(--state-success);
  --brand-error: var(--state-error);
  --brand-warning-bg: var(--state-warning-bg);
  --brand-warning-text: var(--state-warning-text);
  --brand-info: var(--state-info);
  --brand-font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --brand-font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --brand-font-label: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --brand-dur: 240ms;
  --brand-ease: cubic-bezier(.2,0,0,1);
}

/* ---- Brand-specific helpers ---- */
/* Studio: light sections inside the dark page. Add class="on-light" to the section. */
[data-brand="studio"] .on-light {
  --brand-bg: var(--z-cream);  --brand-text: var(--z-ink);  --brand-text-muted: var(--z-mute);
  --brand-line: var(--z-line); --brand-link: var(--z-red);  --brand-link-hover: var(--z-red-deep);
  --brand-focus: var(--z-red); --brand-text-rgb: 27 26 24;  --brand-bg-rgb: 231 228 220;
  --brand-success: var(--state-success); --brand-error: var(--state-error); --brand-info: var(--state-info);
}
/* Hub: editorial captions and quotes use Cormorant italic. */
[data-brand="hub"] .caption, [data-brand="hub"] blockquote {
  font-family: var(--font-cormorant-garamond); font-style: italic;
}
/* Tools and Library: numbers and data line up. */
[data-brand="tools"] :is(table, .num, output, input[type="number"]),
[data-brand="library"] :is(table, .num) { font-variant-numeric: tabular-nums; font-family: var(--brand-font-label); }
/* Tools: blueprint grid background (decorative). */
[data-brand="tools"] .bp-grid {
  background-color: var(--brand-bg);
  background-image: linear-gradient(var(--tools-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tools-grid) 1px, transparent 1px);
  background-size: 30px 30px;
}