/*
 * doob admin — design tokens.
 *
 * The colour, type, shape, shadow and spacing tokens are the designer's, as given in
 * "doob — Brand Foundations for Admin", light and dark; the last block holds the few the
 * panel adds (photo placeholders, the scrim, the menu's width). Components use these
 * tokens only — never a literal colour — so a change of palette is a change here.
 *
 * Dark applies when the system asks for it, unless [data-theme="light"] overrides; and
 * whenever [data-theme="dark"] is set.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/playfair-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/vazirmatn-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1,
    U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74,
    U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EEFF;
}

:root {
  /* colour — light */
  --color-primary: #2f8a5e;
  --color-primary-hover: #297a53;
  --color-primary-pressed: #256e4b;
  --color-primary-soft: #e3f2ea;
  --color-on-primary: #ffffff;
  --color-accent: #e0a52a;
  --color-accent-soft: #fbf1db;
  --color-bg: #f6f1e8;
  --color-surface: #faf9f7;
  --color-card: #ffffff;
  --color-sunken: #f0ede8;
  --color-text: #12100d;
  --color-text-secondary: #6f665d;
  --color-text-muted: #8a857d;
  --color-border: #e3e0da;
  --color-divider: #e9e5df;
  --color-success: #256e4b;
  --color-success-soft: #e3f2ea;
  --color-warning: #9a6a08;
  --color-warning-soft: #fbf1db;
  --color-danger: #c9333f;
  --color-danger-soft: #fbe6e7;
  --color-info: #1f6fd6;
  --color-info-soft: #e6effb;

  /* shadow — light */
  --shadow-sm: 0 1px 2px rgba(18, 16, 13, .06), 0 2px 6px rgba(18, 16, 13, .04);
  --shadow-md: 0 6px 20px rgba(18, 16, 13, .08);
  --shadow-lg: 0 14px 40px rgba(18, 16, 13, .12);
  --shadow-primary: 0 8px 22px rgba(47, 138, 94, .28);
  --focus-ring: 0 0 0 3px rgba(47, 138, 94, .28);

  /* type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Manrope", "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --text-display: 32px;
  --text-h1: 24px;
  --text-h2: 20px;
  --text-h3: 16px;
  --text-body: 14px;
  --text-body-sm: 13px;
  --text-small: 12px;
  --text-caption: 11px;
  --text-overline: 10px;
  --leading-tight: 1.15;
  --leading-normal: 1.5;

  /* shape and space */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* the panel's own — light */
  --photo-a: #c8d9cf;
  --photo-b: #e6d3b3;
  --photo-c: #d6cbe0;
  --photo-d: #cfdbe6;
  --scrim: rgba(18, 16, 13, .42);
  --menu-w: 248px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #2f8a5e;
    --color-primary-hover: #3ba86b;
    --color-primary-pressed: #297a53;
    --color-primary-soft: #173a29;
    --color-on-primary: #ffffff;
    --color-accent: #f0c268;
    --color-accent-soft: #3a2a05;
    --color-bg: #0b0a09;
    --color-surface: #12100d;
    --color-card: #1a1713;
    --color-sunken: #16130f;
    --color-text: #f4efe8;
    --color-text-secondary: #b2aca5;
    --color-text-muted: #8c8177;
    --color-border: #2e2a25;
    --color-divider: #24211d;
    --color-success: #63c893;
    --color-success-soft: #173a29;
    --color-warning: #f0c268;
    --color-warning-soft: #3a2a05;
    --color-danger: #e0555f;
    --color-danger-soft: #3d1418;
    --color-info: #6ea8f0;
    --color-info-soft: #13243d;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 14px 40px rgba(0, 0, 0, .5);
    --shadow-primary: 0 10px 28px rgba(47, 138, 94, .45);
    --focus-ring: 0 0 0 3px rgba(99, 200, 147, .35);
    --photo-a: #23342b;
    --photo-b: #3a3020;
    --photo-c: #2e2836;
    --photo-d: #222d36;
    --scrim: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-primary: #2f8a5e;
  --color-primary-hover: #3ba86b;
  --color-primary-pressed: #297a53;
  --color-primary-soft: #173a29;
  --color-on-primary: #ffffff;
  --color-accent: #f0c268;
  --color-accent-soft: #3a2a05;
  --color-bg: #0b0a09;
  --color-surface: #12100d;
  --color-card: #1a1713;
  --color-sunken: #16130f;
  --color-text: #f4efe8;
  --color-text-secondary: #b2aca5;
  --color-text-muted: #8c8177;
  --color-border: #2e2a25;
  --color-divider: #24211d;
  --color-success: #63c893;
  --color-success-soft: #173a29;
  --color-warning: #f0c268;
  --color-warning-soft: #3a2a05;
  --color-danger: #e0555f;
  --color-danger-soft: #3d1418;
  --color-info: #6ea8f0;
  --color-info-soft: #13243d;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .5);
  --shadow-primary: 0 10px 28px rgba(47, 138, 94, .45);
  --focus-ring: 0 0 0 3px rgba(99, 200, 147, .35);
  --photo-a: #23342b;
  --photo-b: #3a3020;
  --photo-c: #2e2836;
  --photo-d: #222d36;
  --scrim: rgba(0, 0, 0, .6);
  color-scheme: dark;
}