/* Hambord widget UX prototype — design tokens mirrored from src/index.css
   (Graphite surfaces, orange-led palette, Morabba headings, Vazirmatn body). */
@font-face { font-family: "Vazirmatn Variable"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Vazirmatn-Arabic-VF.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: "Vazirmatn Variable"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Vazirmatn-Latin-VF.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Vazirmatn Variable"; font-weight: 100 900; font-display: swap;
  src: url("../fonts/Vazirmatn-LatinExt-VF.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Morabba"; font-weight: 400; src: url("../fonts/Morabba-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Morabba"; font-weight: 500; src: url("../fonts/Morabba-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Morabba"; font-weight: 700; src: url("../fonts/Morabba-Bold.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: light;
  --background: #faf9f6; --foreground: #1b1b1a; --card: #fffefa; --card-foreground: #1b1b1a;
  --popover: #fffefa; --primary: #fe5000; --primary-foreground: #fffefa;
  --secondary: #efede8; --secondary-foreground: #242321; --muted: #f3f1ec; --muted-foreground: #65645f;
  --accent: #eceae4; --accent-foreground: #242321; --destructive: #ad3e39;
  --border: #dbd8d1; --input: #c7c3b9; --field-empty: #fffefa; --field-filled: #faf9f6; --ring: #fe5000;
  --skeleton-fill: #e8e5df; --skeleton-highlight: rgb(255 255 255 / .45);
  --chart-1: #fe5000; --chart-2: #38c77a; --chart-2-line: #26955b; --chart-3: #c54338; --chart-4: #956516; --chart-5: #326dae;
  --success: #38c77a; --success-ink: #1b7144; --radius: .5rem;
  --blue: var(--chart-5); --green: var(--chart-2-line); --amber: var(--chart-4); --red: var(--chart-3); --orange: var(--chart-1); --gray: var(--muted-foreground);
  --shadow-pop: 0 10px 30px -8px rgb(27 27 26 / .22), 0 2px 6px rgb(27 27 26 / .06);
}
:root.dark {
  color-scheme: dark;
  --background: #0b0c0d; --foreground: #f2f1ec; --card: #121416; --card-foreground: #f2f1ec;
  --popover: #181a1c; --primary: #fe5000; --secondary: #222427; --secondary-foreground: #f2f1ec;
  --muted: #191b1d; --muted-foreground: #a7a7a5; --accent: #282a2c; --accent-foreground: #f2f1ec; --destructive: #ef8177;
  --border: #393b3d; --input: #484a4b; --field-empty: #1c1e20; --field-filled: #141618;
  --skeleton-fill: #292b2e; --skeleton-highlight: rgb(255 255 255 / .11);
  --chart-2-line: #38c77a; --chart-3: #ef8177; --chart-4: #e1c16b; --chart-5: #8bb7f0; --success-ink: #75dfa9;
  --shadow-pop: 0 12px 34px -8px rgb(0 0 0 / .65), 0 2px 6px rgb(0 0 0 / .4);
}


/* Hambord palette scales (copied from the panel src/index.css) */
:root {
  --green-50: #EDFBF4;
  --green-100: #D1F5E1;
  --green-200: #A4EACA;
  --green-300: #75DFA9;
  --green-400: #51D38E;
  --green-500: #38C77A;
  --green-600: #26955B;
  --green-700: #1B7144;
  --green-800: #145333;
  --green-900: #0D3C25;
  --green-950: #082618;
  --orange-50: #FFE5DB;
  --orange-100: #FFCBB8;
  --orange-200: #FFAF95;
  --orange-300: #FF9370;
  --orange-400: #FF7448;
  --orange-500: #FE5000;
  --orange-600: #C73D00;
  --orange-700: #932B00;
  --orange-800: #631A00;
  --orange-900: #360A00;
  --orange-950: #0F0100;
  --red-50: #FFE0DA;
  --red-100: #FFC1B6;
  --red-200: #FFA191;
  --red-300: #FF7E6C;
  --red-400: #FF5544;
  --red-500: #FE0000;
  --red-600: #C70000;
  --red-700: #930000;
  --red-800: #630000;
  --red-900: #360000;
  --red-950: #0F0000;
  --yellow-50: #FEFFE5;
  --yellow-100: #FEFFC9;
  --yellow-200: #FDFFAC;
  --yellow-300: #FDFF8B;
  --yellow-400: #FEFF61;
  --yellow-500: #FEFE00;
  --yellow-600: #C7C700;
  --yellow-700: #939300;
  --yellow-800: #636300;
  --yellow-900: #363600;
  --yellow-950: #0F0F00;
  --blue-50: #DBEBFF;
  --blue-100: #B7D7FF;
  --blue-200: #93C2FF;
  --blue-300: #6EADFF;
  --blue-400: #4597FF;
  --blue-500: #007FFE;
  --blue-600: #0062C7;
  --blue-700: #004793;
  --blue-800: #002D63;
  --blue-900: #001636;
  --blue-950: #00030F;
  --neutral-50: #FBF9F5;
  --neutral-100: #E3E1DE;
  --neutral-200: #CBC9C6;
  --neutral-300: #B3B1AF;
  --neutral-400: #9B9997;
  --neutral-500: #838280;
  --neutral-600: #6A6A68;
  --neutral-700: #525251;
  --neutral-800: #3A3A39;
  --neutral-900: #222222;
  --neutral-950: #0A0A0A;
}