/* ============================================================
   Artino design tokens: design system v1.2 (2026-09-23), Slate Teal (dark) / Plum & Mist (light)
   GENERATED FILE. Do not edit by hand.
   Sources: design/artino-design-system.json, design/artino-design-system.proposals.json, design/fonts.manifest.json, design/site.config.json
   Site scheme: dark
   Regenerate: node tools/build-tokens.mjs   (npm run tokens)
   Values marked "proposed" come from design/artino-design-system.proposals.json (not yet in v1.2).
   ============================================================ */

/* ---------- Fonts (self-hosted, OFL; see public/assets/fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces.e66b3fe02e.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+20B9, U+2122, U+2190-21FF, U+2212, U+2215, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/plus-jakarta-sans.43c1103813.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  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+20B9, U+2122, U+2190-21FF, U+2212, U+2215, U+25A0-25FF, U+2600-26FF, U+2700-27BF, U+FEFF, U+FFFD;
}

/* ---------- Site scheme: Slate Teal (dark) only, per design/site.config.json ---------- */
:root {
  color-scheme: dark;
  --art-surface-canvas: #0F1413;
  --art-surface-raised: #19201F;
  --art-surface-sunken: #242E2D;
  --art-surface-border: #303B3A;
  --art-surface-scrim: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.64) 38%, rgba(0,0,0,0.20) 62%, rgba(0,0,0,0) 80%);
  --art-content-primary: #EAF1EF;
  --art-content-muted: #93A5A3;
  --art-content-oncolour: #0F1413;
  --art-content-onimage-primary: #FFFFFF;
  --art-content-onimage-muted: rgba(255,255,255,0.78);
  --art-action-primary-fill: #3FA79F;
  --art-action-primary-on: #05100F;
  --art-action-primary-hover: #56B1AA;
  --art-action-primary-pressed: #69BAB4;
  --art-action-primary-text: #5FC0B8;
  --art-action-primary-subtle: rgba(63,167,159,0.16);
  --art-action-primary-selectedsurface: rgba(63,167,159,0.09);
  --art-action-secondary-text: #C48DAC;
  --art-action-secondary-tintbase: #B57A9C;
  --art-action-secondary-subtle: rgba(181,122,156,0.16);
  --art-action-info-text: #93A5A3;
  --art-status-confirmed-text: #78B56E;
  --art-status-confirmed-subtlefill: rgba(120,181,110,0.16);
  --art-status-pending-text: #A292E0;
  --art-status-pending-subtlefill: rgba(162,146,224,0.16);
  --art-status-completed-text: #B2BEBC;
  --art-status-completed-subtlefill: rgba(178,190,188,0.14);
  --art-status-cancelled-text: #D4716A;
  --art-status-cancelled-subtlefill: rgba(212,113,106,0.16);
  --art-status-draft-text: #93A5A3;
  --art-status-draft-subtlefill: rgba(147,165,163,0.10);
  --art-calendarblock-confirmed-fill: #78B56E;
  --art-calendarblock-confirmed-label: #0C1A09;
  --art-calendarblock-pending-fill: #A292E0;
  --art-calendarblock-pending-label: #120C1F;
  --art-danger: #D4716A;
  --art-surface-borderstrong: #657D7A; /* proposed */
  --art-action-primary-glow: rgba(63,167,159,0.22); /* proposed */
}

/* ---------- Element-scoped schemes (AUDIT D14): a subtree can pin its own mode,
   e.g. an app mockup shown in light on a dark page. ---------- */
[data-scheme="light"] {
  color-scheme: light;
  --art-surface-canvas: #F4F0F1;
  --art-surface-raised: #FFFFFF;
  --art-surface-sunken: #EBE5E7;
  --art-surface-border: #DCD4D7;
  --art-surface-scrim: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.64) 38%, rgba(0,0,0,0.20) 62%, rgba(0,0,0,0) 80%);
  --art-content-primary: #241C22;
  --art-content-muted: #695E64;
  --art-content-oncolour: #FFFFFF;
  --art-content-onimage-primary: #FFFFFF;
  --art-content-onimage-muted: rgba(255,255,255,0.78);
  --art-action-primary-fill: #7A3F5C;
  --art-action-primary-on: #FFFFFF;
  --art-action-primary-hover: #68364F;
  --art-action-primary-pressed: #5A2E44;
  --art-action-primary-text: #6B3650;
  --art-action-primary-subtle: rgba(122,63,92,0.11);
  --art-action-primary-selectedsurface: rgba(122,63,92,0.07);
  --art-action-secondary-text: #2F6B66;
  --art-action-secondary-tintbase: #2F6B66;
  --art-action-secondary-subtle: rgba(47,107,102,0.11);
  --art-action-info-text: #695E64;
  --art-status-confirmed-text: #3F6A36;
  --art-status-confirmed-subtlefill: rgba(63,106,54,0.11);
  --art-status-pending-text: #54408C;
  --art-status-pending-subtlefill: rgba(84,64,140,0.11);
  --art-status-completed-text: #4A4249;
  --art-status-completed-subtlefill: rgba(74,66,73,0.10);
  --art-status-cancelled-text: #A8342E;
  --art-status-cancelled-subtlefill: rgba(168,52,46,0.10);
  --art-status-draft-text: #695E64;
  --art-status-draft-subtlefill: rgba(105,94,100,0.09);
  --art-calendarblock-confirmed-fill: #3F6A36;
  --art-calendarblock-confirmed-label: #FFFFFF;
  --art-calendarblock-pending-fill: #54408C;
  --art-calendarblock-pending-label: #FFFFFF;
  --art-danger: #A8342E;
  --art-surface-borderstrong: #937A84; /* proposed */
  --art-action-primary-glow: rgba(122,63,92,0.14); /* proposed */
}
[data-scheme="dark"] {
  color-scheme: dark;
  --art-surface-canvas: #0F1413;
  --art-surface-raised: #19201F;
  --art-surface-sunken: #242E2D;
  --art-surface-border: #303B3A;
  --art-surface-scrim: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.64) 38%, rgba(0,0,0,0.20) 62%, rgba(0,0,0,0) 80%);
  --art-content-primary: #EAF1EF;
  --art-content-muted: #93A5A3;
  --art-content-oncolour: #0F1413;
  --art-content-onimage-primary: #FFFFFF;
  --art-content-onimage-muted: rgba(255,255,255,0.78);
  --art-action-primary-fill: #3FA79F;
  --art-action-primary-on: #05100F;
  --art-action-primary-hover: #56B1AA;
  --art-action-primary-pressed: #69BAB4;
  --art-action-primary-text: #5FC0B8;
  --art-action-primary-subtle: rgba(63,167,159,0.16);
  --art-action-primary-selectedsurface: rgba(63,167,159,0.09);
  --art-action-secondary-text: #C48DAC;
  --art-action-secondary-tintbase: #B57A9C;
  --art-action-secondary-subtle: rgba(181,122,156,0.16);
  --art-action-info-text: #93A5A3;
  --art-status-confirmed-text: #78B56E;
  --art-status-confirmed-subtlefill: rgba(120,181,110,0.16);
  --art-status-pending-text: #A292E0;
  --art-status-pending-subtlefill: rgba(162,146,224,0.16);
  --art-status-completed-text: #B2BEBC;
  --art-status-completed-subtlefill: rgba(178,190,188,0.14);
  --art-status-cancelled-text: #D4716A;
  --art-status-cancelled-subtlefill: rgba(212,113,106,0.16);
  --art-status-draft-text: #93A5A3;
  --art-status-draft-subtlefill: rgba(147,165,163,0.10);
  --art-calendarblock-confirmed-fill: #78B56E;
  --art-calendarblock-confirmed-label: #0C1A09;
  --art-calendarblock-pending-fill: #A292E0;
  --art-calendarblock-pending-label: #120C1F;
  --art-danger: #D4716A;
  --art-surface-borderstrong: #657D7A; /* proposed */
  --art-action-primary-glow: rgba(63,167,159,0.22); /* proposed */
}

/* ---------- Type families, scale, spacing, radius, borders, components ---------- */
:root {
  --art-font-display: Fraunces, 'Times New Roman', serif;
  --art-font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --art-font-devanagari: 'Anek Devanagari', 'Plus Jakarta Sans', sans-serif;
  --art-font-display-variation: 'SOFT' 30, 'WONK' 1;
  --art-type-display-xl-family: var(--art-font-display);
  --art-type-display-xl-size: clamp(38px, 19.4286px + 4.7619vw, 88px);
  --art-type-display-xl-lineheight: 1.08;
  --art-type-display-xl-weight: 600;
  --art-type-display-xl-letterspacing: -0.01em;
  --art-type-display-xl-transform: none;
  --art-type-display-lg-family: var(--art-font-display);
  --art-type-display-lg-size: clamp(32px, 20.1143px + 3.0476vw, 64px);
  --art-type-display-lg-lineheight: 1;
  --art-type-display-lg-weight: 600;
  --art-type-display-lg-letterspacing: -0.01em;
  --art-type-display-lg-transform: none;
  --art-type-display-md-family: var(--art-font-display);
  --art-type-display-md-size: clamp(27px, 17.7143px + 2.381vw, 52px);
  --art-type-display-md-lineheight: 1;
  --art-type-display-md-weight: 600;
  --art-type-display-md-letterspacing: 0;
  --art-type-display-md-transform: none;
  --art-type-title-family: var(--art-font-display);
  --art-type-title-size: clamp(21px, 16.1714px + 1.2381vw, 34px);
  --art-type-title-lineheight: 1.15;
  --art-type-title-weight: 600;
  --art-type-title-letterspacing: 0;
  --art-type-title-transform: none;
  --art-type-title-sm-family: var(--art-font-display);
  --art-type-title-sm-size: clamp(18px, 16.5143px + 0.381vw, 22px);
  --art-type-title-sm-lineheight: 1.2;
  --art-type-title-sm-weight: 600;
  --art-type-title-sm-letterspacing: 0;
  --art-type-title-sm-transform: none;
  --art-type-body-lg-family: var(--art-font-body);
  --art-type-body-lg-size: clamp(15px, 13.5143px + 0.381vw, 19px);
  --art-type-body-lg-lineheight: 1.6;
  --art-type-body-lg-weight: 400;
  --art-type-body-lg-letterspacing: 0;
  --art-type-body-lg-transform: none;
  --art-type-body-family: var(--art-font-body);
  --art-type-body-size: clamp(14px, 12.8857px + 0.2857vw, 17px);
  --art-type-body-lineheight: 1.6;
  --art-type-body-weight: 400;
  --art-type-body-letterspacing: 0;
  --art-type-body-transform: none;
  --art-type-body-sm-family: var(--art-font-body);
  --art-type-body-sm-size: clamp(13px, 12.2571px + 0.1905vw, 15px);
  --art-type-body-sm-lineheight: 1.45;
  --art-type-body-sm-weight: 400;
  --art-type-body-sm-letterspacing: 0;
  --art-type-body-sm-transform: none;
  --art-type-label-family: var(--art-font-body);
  --art-type-label-size: clamp(12.5px, 11.9429px + 0.1429vw, 14px);
  --art-type-label-lineheight: 1.3;
  --art-type-label-weight: 600;
  --art-type-label-letterspacing: 0.01em;
  --art-type-label-transform: none;
  --art-type-caption-family: var(--art-font-body);
  --art-type-caption-size: clamp(11.5px, 10.9429px + 0.1429vw, 13px);
  --art-type-caption-lineheight: 1.3;
  --art-type-caption-weight: 400;
  --art-type-caption-letterspacing: 0;
  --art-type-caption-transform: none;
  --art-type-overline-family: var(--art-font-body);
  --art-type-overline-size: clamp(11px, 10.6286px + 0.0952vw, 12px);
  --art-type-overline-lineheight: 1.2;
  --art-type-overline-weight: 700;
  --art-type-overline-letterspacing: 0.16em;
  --art-type-overline-transform: uppercase;
  --art-type-badge-family: var(--art-font-body);
  --art-type-badge-size: clamp(10px, 9.6286px + 0.0952vw, 11px);
  --art-type-badge-lineheight: 1;
  --art-type-badge-weight: 700;
  --art-type-badge-letterspacing: 0.06em;
  --art-type-badge-transform: uppercase;
  --art-spacing-0: 0px;
  --art-spacing-1: 4px;
  --art-spacing-2: 6px;
  --art-spacing-3: 8px;
  --art-spacing-4: 10px;
  --art-spacing-5: 12px;
  --art-spacing-6: 14px;
  --art-spacing-7: 16px;
  --art-spacing-8: 20px;
  --art-spacing-9: 24px;
  --art-spacing-10: 28px;
  --art-spacing-11: 32px;
  --art-spacing-12: 40px;
  --art-radius-xs: 6px;
  --art-radius-sm: 8px;
  --art-radius-md: 10px;
  --art-radius-lg: 12px;
  --art-radius-xl: 14px;
  --art-radius-2xl: 18px;
  --art-radius-pill: 999px;
  --art-borders-hairline: 1px;
  --art-borders-emphasis: 1.5px;
  --art-component-button-primary-height: 52px;
  --art-component-button-primary-radius: 12px;
  --art-component-button-primary-fill: var(--art-action-primary-fill);
  --art-component-button-primary-label: var(--art-action-primary-on);
  --art-component-button-primary-weight: 700;
  --art-component-button-primary-compact-height: 44px;
  --art-component-button-primary-compact-radius: 10px;
  --art-component-button-secondary-height: 50px;
  --art-component-button-secondary-radius: 12px;
  --art-component-button-secondary-fill: transparent;
  --art-component-button-secondary-border: 1px solid var(--art-surface-border);
  --art-component-button-secondary-label: var(--art-content-primary);
  --art-component-button-icon-size: 44px;
  --art-component-button-icon-radius: 999px;
  --art-component-input-height: 46px;
  --art-component-input-radius: 10px;
  --art-component-input-fill: var(--art-surface-raised);
  --art-component-input-border: 1px solid var(--art-surface-border);
  --art-component-input-padding: 16px;
  --art-component-chip-height: 34px;
  --art-component-chip-radius: 999px;
  --art-component-chip-padding: 8px 14px;
  --art-component-chip-rest-fill: transparent;
  --art-component-chip-rest-border: 1px solid var(--art-surface-border);
  --art-component-chip-rest-label: var(--art-content-primary);
  --art-component-chip-selected-fill: var(--art-action-secondary-subtle);
  --art-component-chip-selected-border: none;
  --art-component-chip-selected-label: var(--art-action-secondary-text);
  --art-component-statuspill-radius: 999px;
  --art-component-statuspill-padding: 4px 10px;
  --art-component-card-radius: 12px;
  --art-component-card-fill: var(--art-surface-raised);
  --art-component-card-border: 1px solid var(--art-surface-border);
  --art-component-card-padding: 14px;
  --art-component-sheet-radiustop: 18px;
  --art-component-sheet-fill: var(--art-surface-raised);
  --art-component-sheet-grabhandle: 38px 4px;
  --art-component-tabbar-height: 72px;
  --art-component-tabbar-itemtarget: 58px 52px;
  --art-component-tabbar-active: var(--art-action-primary-text);
  --art-component-tabbar-inactive: var(--art-content-muted);
  --art-component-tabbar-fill: var(--art-surface-raised);
  --art-component-tabbar-bordertop: 1px solid var(--art-surface-border);
  --art-component-segmentedcontrol-height: 44px;
  --art-component-segmentedcontrol-trackfill: var(--art-surface-sunken);
  --art-component-segmentedcontrol-trackpadding: 4px;
  --art-component-segmentedcontrol-thumbfill: var(--art-action-primary-fill);
  --art-component-segmentedcontrol-thumblabel: var(--art-action-primary-on);
  --art-component-avatar-sizes: 34px 40px 60px;
  --art-component-avatar-radius: 999px;
}

/* Mockups drawn on the 390px app canvas use the app's exact sizes. */
[data-art-canvas="app"] {
  --art-type-display-xl-size: 38px;
  --art-type-display-lg-size: 32px;
  --art-type-display-md-size: 27px;
  --art-type-title-size: 21px;
  --art-type-title-sm-size: 18px;
  --art-type-body-lg-size: 15px;
  --art-type-body-size: 14px;
  --art-type-body-sm-size: 13px;
  --art-type-label-size: 12.5px;
  --art-type-caption-size: 11.5px;
  --art-type-overline-size: 11px;
  --art-type-badge-size: 10px;
}

/* Hard rule: all numerals tabular. */
html { font-variant-numeric: tabular-nums; }

/* ---------- Type roles: markup names a role, never a pixel size ---------- */
.t-display-xl {
  font-family: var(--art-type-display-xl-family);
  font-size: var(--art-type-display-xl-size);
  line-height: var(--art-type-display-xl-lineheight);
  font-weight: var(--art-type-display-xl-weight);
  letter-spacing: var(--art-type-display-xl-letterspacing);
  text-transform: var(--art-type-display-xl-transform);
  font-variation-settings: var(--art-font-display-variation);
}
.t-display-lg {
  font-family: var(--art-type-display-lg-family);
  font-size: var(--art-type-display-lg-size);
  line-height: var(--art-type-display-lg-lineheight);
  font-weight: var(--art-type-display-lg-weight);
  letter-spacing: var(--art-type-display-lg-letterspacing);
  text-transform: var(--art-type-display-lg-transform);
  font-variation-settings: var(--art-font-display-variation);
}
.t-display-md {
  font-family: var(--art-type-display-md-family);
  font-size: var(--art-type-display-md-size);
  line-height: var(--art-type-display-md-lineheight);
  font-weight: var(--art-type-display-md-weight);
  letter-spacing: var(--art-type-display-md-letterspacing);
  text-transform: var(--art-type-display-md-transform);
  font-variation-settings: var(--art-font-display-variation);
}
.t-title {
  font-family: var(--art-type-title-family);
  font-size: var(--art-type-title-size);
  line-height: var(--art-type-title-lineheight);
  font-weight: var(--art-type-title-weight);
  letter-spacing: var(--art-type-title-letterspacing);
  text-transform: var(--art-type-title-transform);
  font-variation-settings: var(--art-font-display-variation);
}
.t-title-sm {
  font-family: var(--art-type-title-sm-family);
  font-size: var(--art-type-title-sm-size);
  line-height: var(--art-type-title-sm-lineheight);
  font-weight: var(--art-type-title-sm-weight);
  letter-spacing: var(--art-type-title-sm-letterspacing);
  text-transform: var(--art-type-title-sm-transform);
  font-variation-settings: var(--art-font-display-variation);
}
.t-body-lg {
  font-family: var(--art-type-body-lg-family);
  font-size: var(--art-type-body-lg-size);
  line-height: var(--art-type-body-lg-lineheight);
  font-weight: var(--art-type-body-lg-weight);
  letter-spacing: var(--art-type-body-lg-letterspacing);
  text-transform: var(--art-type-body-lg-transform);
}
.t-body {
  font-family: var(--art-type-body-family);
  font-size: var(--art-type-body-size);
  line-height: var(--art-type-body-lineheight);
  font-weight: var(--art-type-body-weight);
  letter-spacing: var(--art-type-body-letterspacing);
  text-transform: var(--art-type-body-transform);
}
.t-body-sm {
  font-family: var(--art-type-body-sm-family);
  font-size: var(--art-type-body-sm-size);
  line-height: var(--art-type-body-sm-lineheight);
  font-weight: var(--art-type-body-sm-weight);
  letter-spacing: var(--art-type-body-sm-letterspacing);
  text-transform: var(--art-type-body-sm-transform);
}
.t-label {
  font-family: var(--art-type-label-family);
  font-size: var(--art-type-label-size);
  line-height: var(--art-type-label-lineheight);
  font-weight: var(--art-type-label-weight);
  letter-spacing: var(--art-type-label-letterspacing);
  text-transform: var(--art-type-label-transform);
}
.t-caption {
  font-family: var(--art-type-caption-family);
  font-size: var(--art-type-caption-size);
  line-height: var(--art-type-caption-lineheight);
  font-weight: var(--art-type-caption-weight);
  letter-spacing: var(--art-type-caption-letterspacing);
  text-transform: var(--art-type-caption-transform);
}
.t-overline {
  font-family: var(--art-type-overline-family);
  font-size: var(--art-type-overline-size);
  line-height: var(--art-type-overline-lineheight);
  font-weight: var(--art-type-overline-weight);
  letter-spacing: var(--art-type-overline-letterspacing);
  text-transform: var(--art-type-overline-transform);
}
.t-badge {
  font-family: var(--art-type-badge-family);
  font-size: var(--art-type-badge-size);
  line-height: var(--art-type-badge-lineheight);
  font-weight: var(--art-type-badge-weight);
  letter-spacing: var(--art-type-badge-letterspacing);
  text-transform: var(--art-type-badge-transform);
}