/* ==========================================================================================
   Fluent 2 design tokens (Microsoft Fluent UI, webLightTheme / webDarkTheme,
   @fluentui/tokens 1.0.0-alpha.24, default "brandWeb" brand ramp).

   This file is the ONLY place colours, spacing, type sizes, radii, shadows and motion are
   defined. Everything else (styles.css, the Tailwind config in index.html, and the inline
   styles generated in app.js / app-api.js / parent-assistant.js) reads these variables, so
   flipping data-theme="dark" on <html> re-themes the whole app.

   Rules: never write a hex colour or a raw px spacing/font size anywhere else — use
   var(--token). Status colours go through the --tint-* / --solid-* aliases at the bottom.
   ========================================================================================== */

:root{
  color-scheme:light;

  /* ---------- Neutral backgrounds ---------- */
  --colorNeutralBackground1:#ffffff;
  --colorNeutralBackground1Hover:#f5f5f5;
  --colorNeutralBackground1Pressed:#e0e0e0;
  --colorNeutralBackground1Selected:#ebebeb;
  --colorNeutralBackground2:#fafafa;
  --colorNeutralBackground2Hover:#f0f0f0;
  --colorNeutralBackground2Pressed:#dbdbdb;
  --colorNeutralBackground2Selected:#e6e6e6;
  --colorNeutralBackground3:#f5f5f5;
  --colorNeutralBackground3Hover:#ebebeb;
  --colorNeutralBackground3Pressed:#d6d6d6;
  --colorNeutralBackground3Selected:#e0e0e0;
  --colorNeutralBackground4:#f0f0f0;
  --colorNeutralBackground5:#ebebeb;
  --colorNeutralBackground6:#e6e6e6;
  --colorNeutralBackgroundInverted:#292929;
  --colorNeutralBackgroundDisabled:#f0f0f0;
  --colorSubtleBackground:transparent;
  --colorSubtleBackgroundHover:#f5f5f5;
  --colorSubtleBackgroundPressed:#e0e0e0;
  --colorSubtleBackgroundSelected:#ebebeb;
  --colorBackgroundOverlay:rgba(0,0,0,0.4);

  /* ---------- Neutral foregrounds ---------- */
  --colorNeutralForeground1:#242424;
  --colorNeutralForeground2:#424242;
  --colorNeutralForeground2Hover:#242424;
  --colorNeutralForeground2BrandHover:#0f6cbd;
  --colorNeutralForeground2BrandSelected:#0f6cbd;
  --colorNeutralForeground3:#616161;
  --colorNeutralForeground3Hover:#424242;
  --colorNeutralForeground4:#707070;
  --colorNeutralForegroundDisabled:#bdbdbd;
  --colorNeutralForegroundOnBrand:#ffffff;
  --colorNeutralForegroundInverted:#ffffff;

  /* ---------- Neutral strokes ---------- */
  --colorNeutralStroke1:#d1d1d1;
  --colorNeutralStroke1Hover:#c7c7c7;
  --colorNeutralStroke1Pressed:#b3b3b3;
  --colorNeutralStroke1Selected:#bdbdbd;
  --colorNeutralStroke2:#e0e0e0;
  --colorNeutralStroke3:#f0f0f0;
  --colorNeutralStrokeAccessible:#616161;
  --colorNeutralStrokeAccessibleHover:#575757;
  --colorNeutralStrokeAccessiblePressed:#4d4d4d;
  --colorNeutralStrokeDisabled:#e0e0e0;
  --colorNeutralStrokeOnBrand:#ffffff;
  --colorStrokeFocus1:#ffffff;
  --colorStrokeFocus2:#000000;

  /* ---------- Brand ---------- */
  --colorBrandBackground:#0f6cbd;
  --colorBrandBackgroundHover:#115ea3;
  --colorBrandBackgroundPressed:#0c3b5e;
  --colorBrandBackgroundSelected:#0f548c;
  --colorCompoundBrandBackground:#0f6cbd;
  --colorCompoundBrandBackgroundHover:#115ea3;
  --colorCompoundBrandBackgroundPressed:#0f548c;
  --colorBrandBackground2:#ebf3fc;
  --colorBrandBackground2Hover:#cfe4fa;
  --colorBrandBackground2Pressed:#96c6fa;
  --colorBrandForeground1:#0f6cbd;
  --colorBrandForeground2:#115ea3;
  --colorBrandForegroundLink:#115ea3;
  --colorBrandForegroundLinkHover:#0f548c;
  --colorCompoundBrandForeground1:#0f6cbd;
  --colorBrandStroke1:#0f6cbd;
  --colorBrandStroke2:#b4d6fa;
  --colorCompoundBrandStroke:#0f6cbd;
  --colorCompoundBrandStrokeHover:#115ea3;
  --colorCompoundBrandStrokePressed:#0f548c;

  /* ---------- Status (success = green, warning = orange, danger = cranberry) ---------- */
  --colorStatusSuccessBackground1:#f1faf1;
  --colorStatusSuccessBackground2:#9fd89f;
  --colorStatusSuccessBackground3:#107c10;
  --colorStatusSuccessForeground1:#0e700e;
  --colorStatusSuccessBorder1:#9fd89f;
  --colorStatusSuccessBorder2:#107c10;
  --colorStatusWarningBackground1:#fff9f5;
  --colorStatusWarningBackground2:#fdcfb4;
  --colorStatusWarningBackground3:#f7630c;
  --colorStatusWarningForeground1:#bc4b09;
  --colorStatusWarningBorder1:#fdcfb4;
  --colorStatusWarningBorder2:#bc4b09;
  --colorStatusDangerBackground1:#fdf3f4;
  --colorStatusDangerBackground2:#eeacb2;
  --colorStatusDangerBackground3:#c50f1f;
  --colorStatusDangerForeground1:#b10e1c;
  --colorStatusDangerBorder1:#eeacb2;
  --colorStatusDangerBorder2:#c50f1f;

  /* ---------- Palette (Lavender = purple accent, Teal) ---------- */
  --colorPaletteLavenderBackground2:#d2ccf8;
  --colorPaletteLavenderForeground2:#3f3682;
  --colorPaletteLavenderBorderActive:#7160e8;
  --colorPaletteTealBackground2:#9bd9db;
  --colorPaletteTealForeground2:#02494c;
  --colorPaletteTealBorderActive:#038387;

  /* ---------- Elevation ---------- */
  --colorNeutralShadowAmbient:rgba(0,0,0,0.12);
  --colorNeutralShadowKey:rgba(0,0,0,0.14);
  --shadow2:0 0 2px var(--colorNeutralShadowAmbient), 0 1px 2px var(--colorNeutralShadowKey);
  --shadow4:0 0 2px var(--colorNeutralShadowAmbient), 0 2px 4px var(--colorNeutralShadowKey);
  --shadow8:0 0 2px var(--colorNeutralShadowAmbient), 0 4px 8px var(--colorNeutralShadowKey);
  --shadow16:0 0 2px var(--colorNeutralShadowAmbient), 0 8px 16px var(--colorNeutralShadowKey);
  --shadow28:0 0 8px var(--colorNeutralShadowAmbient), 0 14px 28px var(--colorNeutralShadowKey);
  --shadow64:0 0 8px var(--colorNeutralShadowAmbient), 0 32px 64px var(--colorNeutralShadowKey);
  --shadow8Brand:0 0 2px rgba(0,0,0,0.30), 0 4px 8px rgba(0,0,0,0.25);

  /* ---------- Shape ---------- */
  --borderRadiusNone:0;
  --borderRadiusSmall:2px;
  --borderRadiusMedium:4px;
  --borderRadiusLarge:6px;
  --borderRadiusXLarge:8px;
  --borderRadius2XLarge:12px;
  --borderRadiusCircular:10000px;
  --strokeWidthThin:1px;
  --strokeWidthThick:2px;
  --strokeWidthThicker:3px;
  --strokeWidthThickest:4px;

  /* ---------- Spacing (same ramp on both axes) ---------- */
  --spacingHorizontalNone:0;  --spacingVerticalNone:0;
  --spacingHorizontalXXS:2px; --spacingVerticalXXS:2px;
  --spacingHorizontalXS:4px;  --spacingVerticalXS:4px;
  --spacingHorizontalSNudge:6px; --spacingVerticalSNudge:6px;
  --spacingHorizontalS:8px;   --spacingVerticalS:8px;
  --spacingHorizontalMNudge:10px; --spacingVerticalMNudge:10px;
  --spacingHorizontalM:12px;  --spacingVerticalM:12px;
  --spacingHorizontalL:16px;  --spacingVerticalL:16px;
  --spacingHorizontalXL:20px; --spacingVerticalXL:20px;
  --spacingHorizontalXXL:24px; --spacingVerticalXXL:24px;
  --spacingHorizontalXXXL:32px; --spacingVerticalXXXL:32px;

  /* ---------- Typography ---------- */
  --fontFamilyBase:'Segoe UI', 'Segoe UI Web (Arabic)', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fontFamilyMonospace:Consolas, 'Courier New', Courier, monospace;
  /* Arabic needs more room between lines than Fluent's Latin values (UX pass, readability): +2px on 200–400. */
  --fontSizeBase100:10px; --lineHeightBase100:14px;
  --fontSizeBase200:12px; --lineHeightBase200:18px;
  --fontSizeBase300:14px; --lineHeightBase300:22px;
  --fontSizeBase400:16px; --lineHeightBase400:24px;
  --fontSizeBase500:20px; --lineHeightBase500:28px;
  --fontSizeBase600:24px; --lineHeightBase600:32px;
  --fontSizeHero700:28px; --lineHeightHero700:36px;
  --fontSizeHero800:32px; --lineHeightHero800:40px;
  --fontSizeHero900:40px; --lineHeightHero900:52px;
  --fontWeightRegular:400;
  --fontWeightMedium:500;
  --fontWeightSemibold:600;
  --fontWeightBold:700;

  /* ---------- Motion ---------- */
  --durationUltraFast:50ms;
  --durationFaster:100ms;
  --durationFast:150ms;
  --durationNormal:200ms;
  --durationGentle:250ms;
  --durationSlow:300ms;
  --curveEasyEase:cubic-bezier(0.33,0,0.67,1);
  --curveDecelerateMid:cubic-bezier(0,0,0,1);
  --curveDecelerateMax:cubic-bezier(0.1,0.9,0.2,1);
  --curveAccelerateMid:cubic-bezier(1,0,1,1);

  /* ---------- App sizes (Fluent component sizes) ---------- */
  --controlHeightSmall:24px;
  --controlHeightMedium:32px;
  --controlHeightLarge:40px;
  --touchTarget:44px;

  /* ---------- App layout constants (unchanged values, now named) ---------- */
  --layout-navbar-h:55px;
  --layout-sidebar-w:200px;
  --layout-drawer-offset:280px;
  --layout-bottombar-h:64px;
  --layout-modal-max-w:750px;
  --layout-login-max-w:420px;

  /* ---------- App aliases: tinted (soft) status colours — background / text / border ---------- */
  --tint-brand-bg:var(--colorBrandBackground2);
  --tint-brand-fg:var(--colorBrandForeground2);
  --tint-brand-border:var(--colorBrandStroke2);
  --tint-success-bg:var(--colorStatusSuccessBackground1);
  --tint-success-fg:var(--colorStatusSuccessForeground1);
  --tint-success-border:var(--colorStatusSuccessBorder1);
  --tint-warning-bg:var(--colorStatusWarningBackground1);
  --tint-warning-fg:var(--colorStatusWarningForeground1);
  --tint-warning-border:var(--colorStatusWarningBorder1);
  --tint-danger-bg:var(--colorStatusDangerBackground1);
  --tint-danger-fg:var(--colorStatusDangerForeground1);
  --tint-danger-border:var(--colorStatusDangerBorder1);
  --tint-purple-bg:#f4f2fd;   /* 8% Lavender over Background1 (precomputed: no color-mix on old Safari) */
  --tint-purple-fg:var(--colorPaletteLavenderForeground2);
  --tint-purple-border:var(--colorPaletteLavenderBackground2);
  --tint-teal-bg:#ebf5f5;     /* 8% Teal over Background1 */
  --tint-teal-fg:var(--colorPaletteTealForeground2);
  --tint-teal-border:var(--colorPaletteTealBackground2);
  --tint-neutral-bg:var(--colorNeutralBackground4);
  --tint-neutral-fg:var(--colorNeutralForeground3);
  --tint-neutral-border:var(--colorNeutralStroke2);

  /* ---------- App aliases: solid fills with white text (same in both themes, >= 4.5:1) ---------- */
  --solid-brand:var(--colorBrandBackground);
  --solid-brand-hover:var(--colorBrandBackgroundHover);
  --solid-success:#107c10;
  --solid-success-hover:#0e700e;
  --solid-warning:#c43501;
  --solid-warning-hover:#a52c01;
  --solid-danger:#c50f1f;
  --solid-danger-hover:#b10e1c;
  --solid-purple:#5c2e91;
  --solid-purple-hover:#4c2678;

  /* ---------- Legacy names used across styles.css and app.js (kept, re-pointed) ---------- */
  /* Page layout (Fluent 2 web, Microsoft account page pattern): content and navigation sit on a
     soft canvas (a faint blue-tinted grey, owner choice); white Fluent cards (shadow4, no border) hold lists, tables and forms. */
  --canvas:#f2f2f9;
  --bg:var(--canvas);
  --nav-hover:var(--colorNeutralBackground3Hover);
  --nav-selected:var(--colorNeutralBackground1);
  --page-max-w:1120px;
  --row-hover:var(--colorSubtleBackgroundHover);   /* table / list row hover */
  /* Field widths: a field is as wide as what it holds (owner rule). Used as max-width, so on
     phones every field still fills the line. */
  --field-w-xs:140px;   /* time, small numbers, counts, percentages */
  --field-w-s:200px;    /* dates, money amounts, short codes */
  --field-w-m:320px;    /* names, phone numbers, usernames, passwords, dropdowns */
  --field-w-l:480px;    /* e-mail, URLs, longer single-line text, search */
  --field-w-xl:640px;   /* notes / multi-line text */
  --login-card:var(--colorNeutralBackground1);
  --login-backdrop:radial-gradient(70% 90% at 100% 0%, rgba(15,108,189,0.16), transparent 60%),
                   radial-gradient(60% 80% at 0% 100%, rgba(113,96,232,0.12), transparent 60%),
                   var(--canvas);
  --surface:var(--colorNeutralBackground1);
  --surface-2:var(--colorSubtleBackgroundHover);
  --surface-3:var(--colorBrandBackground2);
  --text:var(--colorNeutralForeground1);
  --text-muted:var(--colorNeutralForeground3);
  --text-faint:var(--colorNeutralForeground4);
  --border:var(--colorNeutralStroke2);
  --border-strong:var(--colorNeutralStroke1);
  --brand:var(--colorBrandBackground);
  --brand-weak:var(--colorBrandBackground2);
  --shadow:var(--colorNeutralShadowKey);
  --shadow-lg:rgba(0,0,0,0.24);
  --overlay:var(--colorBackgroundOverlay);
  --warning:var(--tint-warning-fg);

  /* ---------- Chat (Teams-like) ---------- */
  --chat-bg:var(--colorNeutralBackground3);
  --chat-header:var(--colorNeutralBackground1);
  --chat-header-text:var(--colorNeutralForeground1);
  --chat-sent:var(--colorBrandBackground2);
  --chat-sent-text:var(--colorNeutralForeground1);
  --chat-received:var(--colorNeutralBackground1);
  --chat-received-text:var(--colorNeutralForeground1);
  --chat-input-bar:var(--colorNeutralBackground1);
  --chat-input-field:var(--colorNeutralBackground1);
  --chat-send:var(--colorBrandBackground);
  --chat-send-hover:var(--colorBrandBackgroundHover);
  --chat-divider:var(--colorNeutralStroke2);
  --chat-meta:var(--colorNeutralForeground3);
}

/* One phone/desktop edge everywhere: phones up to 768px (max-width:768px), desktop from 769px (min-width:769px),
   the same as Tailwind's md in index.html. The navbar and sidebar grow on desktop. */
@media (min-width:769px){ :root{ --layout-navbar-h:60px; } }
/* Phones (UX pass, readability; mobile review 2026-10-25): body text and every field are 16px (iPhones zoom into
   fields under 16px); secondary text is 15px, and labels and badges, the smallest, 13px. Everything sized with
   these tokens follows. */
@media (max-width:768px){
  :root{
    --fontSizeBase100:13px; --lineHeightBase100:18px;
    --fontSizeBase200:15px; --lineHeightBase200:22px;
    --fontSizeBase300:16px; --lineHeightBase300:24px;
    --fontSizeBase400:18px; --lineHeightBase400:26px;
  }
}
@media (min-width:1024px){ :root{ --layout-sidebar-w:220px; } }

/* Dark theme. Screen only, so printing from dark mode still comes out light on paper. */
@media screen{
  :root[data-theme="dark"]{
    color-scheme:dark;

    --colorNeutralBackground1:#292929;
    --colorNeutralBackground1Hover:#3d3d3d;
    --colorNeutralBackground1Pressed:#1f1f1f;
    --colorNeutralBackground1Selected:#383838;
    --colorNeutralBackground2:#1f1f1f;
    --colorNeutralBackground2Hover:#333333;
    --colorNeutralBackground2Pressed:#141414;
    --colorNeutralBackground2Selected:#2e2e2e;
    --colorNeutralBackground3:#141414;
    --colorNeutralBackground3Hover:#292929;
    --colorNeutralBackground3Pressed:#0a0a0a;
    --colorNeutralBackground3Selected:#242424;
    --colorNeutralBackground4:#0a0a0a;
    --colorNeutralBackground5:#000000;
    --colorNeutralBackground6:#333333;
    --colorNeutralBackgroundInverted:#ffffff;
    --colorNeutralBackgroundDisabled:#141414;
    --colorSubtleBackgroundHover:#383838;
    --colorSubtleBackgroundPressed:#2e2e2e;
    --colorSubtleBackgroundSelected:#333333;
    --colorBackgroundOverlay:rgba(0,0,0,0.5);

    --colorNeutralForeground1:#ffffff;
    --colorNeutralForeground2:#d6d6d6;
    --colorNeutralForeground2Hover:#ffffff;
    --colorNeutralForeground2BrandHover:#479ef5;
    --colorNeutralForeground2BrandSelected:#479ef5;
    --colorNeutralForeground3:#adadad;
    --colorNeutralForeground3Hover:#d6d6d6;
    --colorNeutralForeground4:#999999;
    --colorNeutralForegroundDisabled:#5c5c5c;
    --colorNeutralForegroundInverted:#242424;

    --colorNeutralStroke1:#666666;
    --colorNeutralStroke1Hover:#757575;
    --colorNeutralStroke1Pressed:#6b6b6b;
    --colorNeutralStroke1Selected:#707070;
    --colorNeutralStroke2:#525252;
    --colorNeutralStroke3:#3d3d3d;
    --colorNeutralStrokeAccessible:#adadad;
    --colorNeutralStrokeAccessibleHover:#bdbdbd;
    --colorNeutralStrokeAccessiblePressed:#b3b3b3;
    --colorNeutralStrokeDisabled:#424242;
    --colorNeutralStrokeOnBrand:#292929;
    --colorStrokeFocus1:#000000;
    --colorStrokeFocus2:#ffffff;

    --colorBrandBackground:#115ea3;
    --colorBrandBackgroundHover:#0f6cbd;
    --colorBrandBackgroundPressed:#0c3b5e;
    --colorBrandBackgroundSelected:#0f548c;
    --colorCompoundBrandBackground:#479ef5;
    --colorCompoundBrandBackgroundHover:#62abf5;
    --colorCompoundBrandBackgroundPressed:#2886de;
    --colorBrandBackground2:#082338;
    --colorBrandBackground2Hover:#0c3b5e;
    --colorBrandBackground2Pressed:#061724;
    --colorBrandForeground1:#479ef5;
    --colorBrandForeground2:#62abf5;
    --colorBrandForegroundLink:#479ef5;
    --colorBrandForegroundLinkHover:#62abf5;
    --colorCompoundBrandForeground1:#479ef5;
    --colorBrandStroke1:#479ef5;
    --colorBrandStroke2:#0e4775;
    --colorCompoundBrandStroke:#479ef5;
    --colorCompoundBrandStrokeHover:#62abf5;
    --colorCompoundBrandStrokePressed:#2886de;

    --colorStatusSuccessBackground1:#052505;
    --colorStatusSuccessBackground2:#094509;
    --colorStatusSuccessForeground1:#54b054;
    --colorStatusSuccessBorder1:#107c10;
    --colorStatusSuccessBorder2:#9fd89f;
    --colorStatusWarningBackground1:#4a1e04;
    --colorStatusWarningBackground2:#8a3707;
    --colorStatusWarningForeground1:#faa06b;
    --colorStatusWarningBorder1:#f7630c;
    --colorStatusWarningBorder2:#f98845;
    --colorStatusDangerBackground1:#3b0509;
    --colorStatusDangerBackground2:#6e0811;
    --colorStatusDangerForeground1:#dc626d;
    --colorStatusDangerBorder1:#c50f1f;
    --colorStatusDangerBorder2:#dc626d;

    --colorPaletteLavenderBackground2:#3f3682;
    --colorPaletteLavenderForeground2:#d2ccf8;
    --colorPaletteLavenderBorderActive:#a79cf1;
    --colorPaletteTealBackground2:#02494c;
    --colorPaletteTealForeground2:#9bd9db;
    --colorPaletteTealBorderActive:#4cb4b7;

    --colorNeutralShadowAmbient:rgba(0,0,0,0.24);
    --colorNeutralShadowKey:rgba(0,0,0,0.28);

    --tint-purple-bg:#262140;
    /* Dark red text: Fluent palette Red Foreground1 (5.2:1 on cards; Danger Foreground1 #dc626d is 4.2:1). */
    --tint-danger-fg:#e37d80;
    --row-hover:var(--colorNeutralBackground2Selected);   /* subtler in dark so tinted text keeps >= 4.5:1 */
    --tint-teal-bg:#0d2e2f;

    --canvas:var(--colorNeutralBackground2);   /* dark: cards (Background1) sit lighter than the canvas */
    --nav-hover:var(--colorNeutralBackground2Hover);
    --nav-selected:var(--colorNeutralBackground1Hover);
    --login-card:var(--colorNeutralBackground2);
    --login-backdrop:radial-gradient(70% 90% at 100% 0%, rgba(71,158,245,0.14), transparent 60%),
                     radial-gradient(60% 80% at 0% 100%, rgba(113,96,232,0.16), transparent 60%),
                     #0e101a;
    --chat-bg:var(--colorNeutralBackground2);
    --shadow-lg:rgba(0,0,0,0.48);
  }
}