/* Smart Red Sea Weather — design tokens (light theme default) */
:root {
	/* Spacing scale — 4 px base, 4-px step. */
	--srs-space-0: 0;
	--srs-space-1: 4px;
	--srs-space-2: 8px;
	--srs-space-3: 12px;
	--srs-space-4: 16px;
	--srs-space-5: 20px;
	--srs-space-6: 24px;
	--srs-space-8: 32px;
	--srs-space-10: 40px;
	--srs-space-12: 48px;
	--srs-space-16: 64px;

	/* Typography scale — Major Second, 1.125 ratio. */
	--srs-font-size-xs:   12px;
	--srs-font-size-sm:   14px;
	--srs-font-size-base: 16px;
	--srs-font-size-lg:   18px;
	--srs-font-size-xl:   20px;
	--srs-font-size-2xl:  24px;
	--srs-font-size-3xl:  30px;
	--srs-font-size-4xl:  36px;

	/* Font weights. */
	--srs-font-weight-regular:  400;
	--srs-font-weight-medium:   500;
	--srs-font-weight-semibold: 600;
	--srs-font-weight-bold:     700;

	/* Line heights. */
	--srs-line-height-tight:   1.2;
	--srs-line-height-normal:  1.5;
	--srs-line-height-relaxed: 1.7;

	/* Border radius. */
	--srs-radius-none: 0;
	--srs-radius-sm:   4px;
	--srs-radius-md:   8px;
	--srs-radius-lg:   12px;
	--srs-radius-xl:   16px;
	--srs-radius-pill: 9999px;
	--srs-radius-full: 50%;

	/* Elevation. */
	--srs-elevation-0: none;
	--srs-elevation-1: 0 1px 2px rgba(0,0,0,.06);
	--srs-elevation-2: 0 2px 4px rgba(0,0,0,.08);
	--srs-elevation-3: 0 4px 12px rgba(0,0,0,.1);
	--srs-elevation-4: 0 8px 24px rgba(0,0,0,.12);
	--srs-elevation-5: 0 12px 48px rgba(0,0,0,.16);

	/* Animation tokens. */
	--srs-duration-fast:  150ms;
	--srs-duration-base:  250ms;
	--srs-duration-slow:  400ms;
	--srs-ease-in:        cubic-bezier(0.4, 0, 1, 1);
	--srs-ease-out:       cubic-bezier(0, 0, 0.2, 1);
	--srs-ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
	--srs-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Z-index scale. */
	--srs-z-hide:    -1;
	--srs-z-base:    0;
	--srs-z-dropdown: 1000;
	--srs-z-sticky:   1100;
	--srs-z-overlay:  1200;
	--srs-z-modal:    1300;
	--srs-z-popover:  1400;
	--srs-z-tooltip:  1500;

	/* Colours — surfaces. */
	--srs-color-surface:     #ffffff;
	--srs-color-surface-alt: #f8fafc;
	--srs-color-overlay:     rgba(15, 23, 42, 0.5);
	--srs-color-warn-bg:     #fef3c7;

	/* Round 1A pre-approved additions */
	--srs-color-surface-raised:      #f1f5f9;
	--srs-color-warn-fg:             #92400e;        /* text on warn-bg, paired with --srs-color-warn-bg */
	--srs-color-divider-light:       #ddd;
	--srs-color-popover:             rgba(102, 102, 102, 0.12);
	--srs-color-popover-border:      rgba(160, 160, 160, 0.18);
	--srs-color-danger-bg:           rgba(248, 113, 113, 0.30);

	/* Colours — text. */
	--srs-color-text-primary:  #0f172a;
	--srs-color-text-muted:    #475569;
	--srs-color-text-on-brand: #ffffff;

	/* Round 1A pre-approved additions */
	--srs-color-text-secondary:      #475569;        /* semantic alias for muted */
	--srs-color-text-inverse:        #ffffff;        /* for hero card / dark backgrounds */
	--srs-color-link:                #0066cc;        /* legacy link blue resolver */
	--srs-color-on-image:            rgba(255, 255, 255, 0.4);
	--srs-color-secondary-fg:        #ffffff;        /* text on --srs-color-secondary */

	/* Colours — brand (overridable by admin). */
	--srs-color-primary:   #006c84;
	--srs-color-secondary: #f97316;
	--srs-color-accent:    #06b6d4;

	/* Round 1A pre-approved additions */
	--srs-color-editor-frame:        #2271b1;        /* WP admin frame in editor.css */

	/* Colours — status (immutable per governance/18 §DS17). */
	--srs-color-perfect:           #16a34a;
	--srs-color-perfect-emphasis:  #15803d;
	--srs-color-good:              #65a30d;
	--srs-color-good-emphasis:     #4d7c0f;
	--srs-color-cautious:          #eab308;
	--srs-color-cautious-emphasis: #a16207;
	--srs-color-unsuitable:          #dc2626;
	--srs-color-unsuitable-emphasis: #b91c1c;

	/* Round 1A pre-approved additions */
	--srs-color-info:                #06b6d4;
	--srs-color-info-fg:             #ffffff;
	--srs-color-warning:             #eab308;
	--srs-color-warning-fg:          #1f2937;
	--srs-color-danger:              #dc2626;
	--srs-color-danger-fg:           #ffffff;
	--srs-color-success:             #16a34a;
	--srs-color-success-fg:          #ffffff;

	/* Typography font stacks. */
	--srs-font-latin:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--srs-font-arabic: "Cairo", "Tajawal", "Noto Sans Arabic", system-ui, sans-serif;
	--srs-font-mono:   ui-monospace, SFMono-Regular, "SF Mono", Consolas, monospace;
	--srs-font-current: var(--srs-font-latin);

	/* Hero card (v1.1.0 / P-4) — gradient direction + on-image tokens.
	 * Anchored to docs/reference/hero-card-original.webp. Every other Hero
	 * Card value comes from this file's pre-existing palette (governance/18 §18.7).
	 */
	--srs-gradient-hero: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 38%, #be185d 100%);
	--srs-weather-hero-bg:        var(--srs-gradient-hero);
	--srs-weather-hero-text-on:   #ffffff;
	--srs-color-hero-muted-on:    rgba(255, 255, 255, 0.78);
	--srs-color-hero-divider-on:  rgba(255, 255, 255, 0.18);

	/* Border + primary-hover — needed by the Hero Card's light scheme and
	 * CTA hover state (P-4 review). Reasonable defaults that complement
	 * the existing palette. */
	--srs-color-border:          #e2e8f0;
	--srs-color-primary-hover:    #005a6f;

	/* Round 1A pre-approved additions */
	--srs-color-border-strong:       #cbd5e1;
	--srs-color-muted-strong:        #64748b;
	--srs-color-focus:               #0066cc;        /* focus outline (was legacy link blue) */
	--srs-color-focus-ring:          rgba(0, 102, 204, .35);

	/* Round 1A consultant-fix additions (audit gap; see REFACTOR-REPORT row 1A notes) */
	--srs-color-border-light:        #ddd;            /* lighter border, used in editor.css + weather-style.css */
	--srs-color-cautious-fg:         #1f2937;          /* text on cautious backgrounds, paired with --srs-color-cautious */
}
body.locale-ar {
	--srs-font-current: var(--srs-font-arabic);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		/* dark overrides loaded separately via tokens-dark.css */
	}
}