/* Ibaadur Rahman Writings — design tokens.
   Every colour used on the site is defined here and nowhere else. */

@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/fonts/cormorant-latin-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/sourceserif-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/sourceserif-latin-italic.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("/fonts/naskh-arabic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; 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: "Noto Nastaliq Urdu"; src: url("/fonts/nastaliq-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("/fonts/nastaliq-arabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E; }
@font-face { font-family: "Noto Sans Devanagari"; src: url("/fonts/devanagari.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Noto Sans Tamil"; src: url("/fonts/tamil.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC; }

:root {
  /* brand constants (same in both themes) */
  --brand-deep: #15302b;
  --brand-deep-2: #0e211d;
  --brand-gold: #c4a04a;
  --brand-gold-light: #e4cd8f;
  --on-deep: #f7f2e8;
  --on-deep-muted: rgba(247, 242, 232, .78);
  --on-deep-line: rgba(228, 205, 143, .18);
  --on-gold: #0e211d;
  --brand-deep-3: #0a1916;
  --veil-a: rgba(10, 25, 22, .82);
  --veil-b: rgba(13, 30, 26, .5);
  --veil-c: rgba(10, 25, 22, .74);
  --veil-strong: rgba(10, 25, 22, .9);
  --veil-glow: rgba(196, 160, 74, .12);
  --tile-1: #15302b;
  --tile-2: #2c6a5b;
  --tile-3: #a07e30;
  --tile-4: #3c4d48;
  --nav-bg: rgba(14, 33, 29, .94);
  --on-deep-soft: rgba(247, 242, 232, .78);
  --foot-muted: rgba(247, 242, 232, .66);
  --foot-faint: rgba(247, 242, 232, .56);

  /* light theme */
  --paper: #f7f2e8;
  --surface: #fbf8f1;
  --surface-2: #f0e9da;
  --ink: #16231f;
  --ink-2: #3c4d48;
  --muted: #56675f;
  --line: rgba(22, 35, 31, .12);
  --line-strong: rgba(22, 35, 31, .3);
  --accent: #2c6a5b;
  --accent-strong: #1f4f43;
  --accent-tint: #dceae3;
  --gold-tint: #f3e6c2;
  --gold-text: #5c4510;
  --danger: #9b2c2c;
  --danger-tint: #f7e3e0;
  --focus: #2c6a5b;
  --shadow-1: 0 1px 2px rgba(14, 33, 29, .06), 0 4px 16px rgba(14, 33, 29, .06);
  --shadow-2: 0 2px 4px rgba(14, 33, 29, .06), 0 16px 40px rgba(14, 33, 29, .12);

  /* admin */
  --admin-bg: #f6f7f5;
  --admin-surface: #ffffff;
  --admin-line: #e7e9e5;
  --admin-line-soft: #eef0ec;
  --skeleton: #ece5d6;
  --admin-heading: #15302b;
  --admin-pressed: #15302b;
  --admin-pressed-fg: #ffffff;

  /* type */
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-text: "Source Serif 4", Georgia, serif;
  --f-ui: "Jost", system-ui, sans-serif;
  --f-ar: "Noto Naskh Arabic", "Noto Naskh Arabic UI", serif;
  --f-ur: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif;
  --f-hi: "Noto Sans Devanagari", var(--f-ui);
  --f-ta: "Noto Sans Tamil", var(--f-ui);

  --step--1: .8125rem;
  --step-0: 1rem;
  --step-1: clamp(1.125rem, 1.08rem + .2vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --step-3: clamp(1.625rem, 1.4rem + .9vw, 2.125rem);
  --step-4: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --step-5: clamp(2.25rem, 1.6rem + 2.6vw, 4rem);

  /* space: 4 px base */
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem;

  --r-btn: 2px; --r-input: 4px; --r-card: 8px; --r-admin: 12px; --r-pill: 999px;
  --measure: 42rem;
  --wide: 73.75rem;
  --dur: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1c19; --surface: #15241f; --surface-2: #1b2d28;
    --ink: #ece5d6; --ink-2: #c9c2b3; --muted: #a3ada7;
    --line: rgba(236, 229, 214, .12); --line-strong: rgba(236, 229, 214, .3);
    --accent: #7cc0ab; --accent-strong: #a9d8c9; --accent-tint: #1f3a33;
    --gold-tint: #3a3220; --gold-text: #e4cd8f;
    --danger: #e08a7f; --danger-tint: #3a1f1c; --focus: #e4cd8f;
    --shadow-1: none; --shadow-2: 0 16px 40px rgba(0, 0, 0, .4);
    --skeleton: #22352f;
    --admin-bg: #0c1714; --admin-surface: #15241f; --admin-line: rgba(236, 229, 214, .12); --admin-line-soft: rgba(236, 229, 214, .07); --admin-heading: #e4cd8f; --admin-pressed: #e4cd8f; --admin-pressed-fg: #0e211d;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1c19; --surface: #15241f; --surface-2: #1b2d28;
  --ink: #ece5d6; --ink-2: #c9c2b3; --muted: #a3ada7;
  --line: rgba(236, 229, 214, .12); --line-strong: rgba(236, 229, 214, .3);
  --accent: #7cc0ab; --accent-strong: #a9d8c9; --accent-tint: #1f3a33;
  --gold-tint: #3a3220; --gold-text: #e4cd8f;
  --danger: #e08a7f; --danger-tint: #3a1f1c; --focus: #e4cd8f;
  --shadow-1: none; --shadow-2: 0 16px 40px rgba(0, 0, 0, .4);
  --skeleton: #22352f;
  --admin-bg: #0c1714; --admin-surface: #15241f; --admin-line: rgba(236, 229, 214, .12); --admin-line-soft: rgba(236, 229, 214, .07); --admin-heading: #e4cd8f; --admin-pressed: #e4cd8f; --admin-pressed-fg: #0e211d;
}