/* Brandagy design tokens. The only place raw values are allowed.
   Every other stylesheet references var(--...). */

:root {
  /* Surfaces */
  --bg:            #F7F8F3;  /* page background */
  --surface:       #FFFFFF;  /* cards, panels, inputs */
  --tint:          #F1F1EA;  /* wordmark wells, quiet fills */
  --line:          #E2E4D9;  /* hairline borders */
  --scrim:         rgba(11, 59, 46, 0.34);

  /* Ink */
  --ink:           #0B3B2E;  /* primary text, dark surfaces */
  --ink-hover:     #12513D;
  --on-ink:        #FFFFFF;
  --text:          rgba(0, 0, 0, 0.9);
  --text-muted:    rgba(0, 0, 0, 0.6);
  --text-soft:     #93A498;

  /* Accent — one hue family built from the brand lime #B3F00A */
  --accent:        #567307;  /* links, active nav, ticks — dark cut of the lime, AA on light */
  --accent-tint:   #EEF9D2;  /* badge fills, focus ring */
  --lime:          #B3F00A;  /* highlight on dark only */
  --glow:          #E9F6C4;  /* identity wash */

  /* Semantic */
  --success:       #2F7A55;  --success-tint: #E5F2EB;
  --warning:       #B4761E;  --warning-tint: #FAF1E2;
  --error:         #A33A3A;  --error-tint:   #F8E9E9;
  --info:          #2C6E8F;  --info-tint:    #E4EEF3;
  --danger-line:   #E7C9C9;
  --disabled:      #E7E9E1;
  --error-line:    #C9807F;
  --account-bg:    #F8F7F6;
  --footer-bg:     #FBFBF9;
  --accent-line:   #D6EE9C;
  --on-ink-muted:  rgba(247, 248, 243, .6);
  --on-ink-soft:   rgba(247, 248, 243, .55);
  --on-ink-line:   rgba(247, 248, 243, .12);
  --on-ink-fill:   rgba(247, 248, 243, .22);

  /* Type — one family, Arabic and Latin together */
  --font: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;

  --fs-display: 3.25rem;  --lh-display: 1.10;
  --fs-h1:      1.75rem;  --lh-h1:      1.36;
  --fs-h2:      1.5rem;   --lh-h2:      1.42;
  --fs-h3:      1.0625rem;--lh-h3:      1.47;
  --fs-body-lg: 0.9375rem;--lh-body-lg: 1.47;
  --fs-body:    0.875rem; --lh-body:    1.43;
  --fs-meta:    0.8125rem;--lh-meta:    1.46;
  --fs-label:   0.75rem;  --lh-label:   1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  /* Space — multiples of 4 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 48px;
  --s-9: 64px; --s-10: 80px; --s-11: 96px;

  /* Containers */
  --container:     1200px;
  --container-page: 1080px;
  --container-app: var(--container-page);
  --container-doc: 800px;
  --content-narrow: 480px;
  --aside:         340px;
  --visual-min:    360px;
  --success-mark:  64px;
  --gutter:        40px;
  --gutter-tablet: 28px;
  --gutter-mobile: 18px;

  /* Shape */
  --r-sm: 9px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;
  --border: 1px solid var(--line);
  --focus-ring: 0 0 0 3px var(--accent-tint);
  --shadow-card:  0 16px 38px -22px rgba(11, 59, 46, 0.20);
  --shadow-menu:  0 16px 44px -20px rgba(11, 59, 46, 0.28);
  --shadow-modal: 0 30px 80px -20px rgba(11, 59, 46, 0.40);

  /* Motion — target intensity ~40/100: clarify, never perform */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 600ms;

  /* Chrome geometry */
  --header-h: 68px;
  --header-h-mobile: 62px;
  --touch: 44px;

  /* Account geometry — profile header and the settings shell */
  --avatar-xl:      112px;  /* profile header */
  --avatar-lg:      120px;  /* settings photo preview */
  --icon-tile:      52px;   /* empty-state icon */
  --rail-w:         240px;
  --rail-w-tablet:  210px;
  --panel-max:      720px;
  --container-settings: 1120px;
  --rail-sticky-top: 88px;

  /* Layers */
  --z-sticky: 100; --z-menu: 120; --z-overlay: 200; --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; }
}