/*
 * Raqmana design system tokens.
 * Source: Claude Design project "Raqmana design system specifications" (tokens/*.css, vuetify/).
 * Raw palette values are theme-independent; semantic tokens are redefined for dark mode below.
 */
:root {
  /* Brand blues */
  --rq-blue-900: #02163F;
  --rq-blue-800: #08286E; /* primary hover / pressed */
  --rq-blue-700: #0D4AA8; /* primary */
  --rq-blue-600: #006DC5; /* accent: eyebrows, numbers */
  --rq-blue-500: #0192F1; /* bright accent: rules, dots */
  --rq-blue-300: #7CC4F8; /* light accent */
  --rq-blue-200: #C7D6EE; /* text on solid blue (secondary) */
  --rq-blue-100: #DCE8FA; /* tint strong */
  --rq-blue-50: #EEF4FC;  /* tint soft */

  /* Neutrals */
  --rq-ink-900: #33393F;
  --rq-ink-700: #5B6570;
  --rq-ink-500: #78838C;
  --rq-ink-300: #CFD9E2;
  --rq-paper: #F3F7FC;
  --rq-chrome: #F4F7FB;
  --rq-white: #FFFFFF;

  /* Status (derived for the app) */
  --rq-green-700: #1E7A45;
  --rq-green-50: #E6F4EC;
  --rq-amber-700: #A45F00;
  --rq-amber-50: #FBF1E0;
  --rq-red-700: #B42318;
  --rq-red-50: #FCEBEA;

  /* Accent palette: calm companions to the brand blue, for variety (step colours, department tiles).
     Each has a strong tone (icons, numbers, small labels) and a soft tint (tiles, chips). */
  --rq-accent-teal: #0E7C86;
  --rq-accent-teal-tint: #E2F3F4;
  --rq-accent-violet: #6D4AB5;
  --rq-accent-violet-tint: #EFEAFA;
  --rq-accent-amber: #A45F00;
  --rq-accent-amber-tint: #FBF1E0;
  --rq-accent-rose: #B4235A;
  --rq-accent-rose-tint: #FCE8EF;
  --rq-accent-green: #1E7A45;
  --rq-accent-green-tint: #E6F4EC;
  --rq-accent-sky: #0272B8;
  --rq-accent-sky-tint: #E3F1FB;

  /* Lines (navy alpha, never grey): .10 sections/chrome, .08 cards, .16 list rows, .22 chips/inputs */
  --rq-line-soft: rgba(8, 40, 110, .10);
  --rq-line: rgba(8, 40, 110, .08);   /* cards, frames (lightened from the spec's .12) */
  --rq-line-row: rgba(8, 40, 110, .16);
  --rq-line-strong: rgba(8, 40, 110, .22);
  --rq-line-emphasis: var(--rq-blue-700); /* 2px rules: selected stat card, active tab */
  --rq-focus-ring: 0 0 0 3px rgba(1, 146, 241, .35);
  --rq-switch-off: var(--rq-ink-300); /* switch track when off (spec --rq-dot) */

  /* Semantic */
  --rq-bg-page: var(--rq-paper);
  --rq-surface: var(--rq-white);
  --rq-surface-chrome: var(--rq-chrome);   /* table heads, dialog footers, read-only fields */
  --rq-surface-tint: var(--rq-blue-100);   /* tint strong: CTA bands, icon tiles */
  --rq-surface-hover: var(--rq-blue-50);   /* tint soft: hover rows, secondary buttons */
  --rq-surface-overlay: rgba(8, 40, 110, .32);
  --rq-icon-tile: var(--rq-blue-100);
  --rq-text-heading: var(--rq-blue-700);
  --rq-text-body: var(--rq-ink-900);
  --rq-text-muted: var(--rq-ink-700);
  --rq-text-subtle: var(--rq-ink-500);
  --rq-text-eyebrow: var(--rq-blue-600);
  --rq-text-number: var(--rq-blue-700);
  --rq-text-link: var(--rq-blue-700);
  --rq-text-link-hover: var(--rq-blue-600);
  --rq-rule-accent: var(--rq-blue-500);
  --rq-action-primary: var(--rq-blue-700);
  --rq-action-primary-hover: var(--rq-blue-800);
  --rq-text-on-primary: var(--rq-white);
  --rq-text-on-primary-muted: var(--rq-blue-200);

  --rq-success: var(--rq-green-700);
  --rq-success-tint: var(--rq-green-50);
  --rq-warning: var(--rq-amber-700);
  --rq-warning-tint: var(--rq-amber-50);
  --rq-danger: var(--rq-red-700);
  --rq-danger-tint: var(--rq-red-50);
  --rq-info: var(--rq-blue-600);
  --rq-info-tint: var(--rq-blue-50);

  /* Type */
  --rq-font-display: 'Alexandria', 'Tajawal', sans-serif;
  --rq-font-body: 'Tajawal', sans-serif;
  --rq-text-h2: 24px;      /* page titles (app density) */
  --rq-text-h3: 17px;      /* dialog titles */
  --rq-text-card-title: 15px;
  --rq-text-lead: 14px;    /* page subtitles */
  --rq-text-body-size: 14px;
  --rq-text-small: 14px;
  --rq-text-eyebrow-size: 14px;
  --rq-text-label: 13px;
  --rq-text-caption: 12px;
  --rq-lh-body: 1.75;

  /* Spacing */
  --rq-space-1: 4px;
  --rq-space-2: 8px;
  --rq-space-3: 12px;
  --rq-space-4: 16px;
  --rq-space-5: 20px;
  --rq-space-6: 24px;
  --rq-space-7: 28px;
  --rq-space-8: 32px;
  --rq-space-10: 40px;
  --rq-space-12: 48px;

  /* Corners */
  --rq-radius-sm: 4px;    /* buttons, inputs, label badges */
  --rq-radius-md: 6px;    /* frames, panels */
  --rq-radius-card: 8px;  /* cards, dialogs */
  --rq-radius-lg: 12px;   /* icon tiles */
  --rq-radius-pill: 999px;

  /* Shadows: blue-tinted, negative spread — frames, dialogs, sticky bars, the pill CTA. Cards have none. */
  --rq-shadow-color: 8, 40, 110;
  --rq-shadow-frame-sm: 0 20px 40px -24px rgba(var(--rq-shadow-color), .35);
  --rq-shadow-frame-md: 0 30px 60px -28px rgba(var(--rq-shadow-color), .45);
  --rq-shadow-lifted: 0 30px 60px -24px rgba(var(--rq-shadow-color), .5);
  --rq-shadow-cta: 0 18px 36px -18px rgba(13, 74, 168, .7);

  /* Layout */
  --rq-sidebar-width: 240px;
  --rq-topbar-height: 64px;

  /* Motion */
  --rq-ease: cubic-bezier(.2, .7, .2, 1);
  --rq-dur-fast: .15s;
  --rq-dur: .2s;
}

/*
 * Dark theme: deep navy surfaces, raised primary, light-blue hairlines (spec tokens/colors.css).
 * html[data-theme] (kept in sync by themePreference.js) covers elements teleported to <body>,
 * outside Vuetify's themed app element — e.g. floating save bars.
 */
html[data-theme="dark"],
.v-theme--dark {
  --rq-bg-page: #0A1628;
  --rq-surface: #0F1F38;
  --rq-surface-chrome: #0D1B31;
  --rq-surface-tint: #1B3762;
  --rq-surface-hover: #142A4C;
  --rq-surface-overlay: rgba(2, 8, 20, .6);
  --rq-icon-tile: #1B3762;
  --rq-line-soft: rgba(124, 196, 248, .10);
  --rq-line: rgba(124, 196, 248, .09);
  --rq-line-row: rgba(124, 196, 248, .17);
  --rq-line-strong: rgba(124, 196, 248, .26);
  --rq-line-emphasis: #5AB0F5;
  --rq-focus-ring: 0 0 0 3px rgba(90, 176, 245, .4);
  --rq-switch-off: rgba(124, 196, 248, .26);
  --rq-text-heading: #DCE8FA;
  --rq-text-body: #E4EAF2;
  --rq-text-muted: #A6B3C2;
  --rq-text-subtle: #7F8D9E;
  --rq-text-eyebrow: #5AB0F5;
  --rq-text-number: #7CC4F8;
  --rq-text-link: #7CC4F8;
  --rq-text-link-hover: #A9D8FA;
  --rq-rule-accent: #3AA6F5;
  --rq-action-primary: #2E6FD6;
  --rq-action-primary-hover: #4A86E6;
  --rq-text-on-primary-muted: #DCE8FA;

  --rq-success: #5BCB8A;
  --rq-success-tint: rgba(91, 203, 138, .14);
  --rq-warning: #F0B55A;
  --rq-warning-tint: rgba(240, 181, 90, .14);
  --rq-danger: #F2837A;
  --rq-danger-tint: rgba(242, 131, 122, .14);
  --rq-info: #5AB0F5;
  --rq-info-tint: rgba(90, 176, 245, .14);

  --rq-accent-teal: #4FD1C5;
  --rq-accent-teal-tint: rgba(79, 209, 197, .14);
  --rq-accent-violet: #B39DF0;
  --rq-accent-violet-tint: rgba(179, 157, 240, .14);
  --rq-accent-amber: #F0B55A;
  --rq-accent-amber-tint: rgba(240, 181, 90, .14);
  --rq-accent-rose: #F28BB0;
  --rq-accent-rose-tint: rgba(242, 139, 176, .14);
  --rq-accent-green: #5BCB8A;
  --rq-accent-green-tint: rgba(91, 203, 138, .14);
  --rq-accent-sky: #5AB0F5;
  --rq-accent-sky-tint: rgba(90, 176, 245, .14);

  --rq-shadow-color: 0, 0, 0;
  color-scheme: dark;
}