/* Binoki Figma tokens - revision 03 */
:root {
  --binoki-color-red: rgba(216, 32, 0, 1);
  --binoki-color-paper: rgba(246, 242, 233, 1);
  --binoki-color-ink: rgba(33, 31, 27, 1);
  --binoki-color-black: rgba(0, 0, 0, 1);
  --binoki-color-white: rgba(255, 255, 255, 1);
  --binoki-color-transparent: rgba(255, 255, 255, 0);
  --binoki-color-photo-surface: rgba(77, 76, 73, 0.45);
  --binoki-color-detailed-surface: rgba(255, 255, 255, 0.23);
  --binoki-color-plain-surface: rgba(255, 255, 255, 0.6);
  --binoki-color-photo-edge: rgba(255, 255, 255, 0.3);
  --binoki-color-detailed-edge: rgba(255, 255, 255, 0.25);
  --binoki-color-plain-edge: rgba(33, 31, 27, 0.1);
  --binoki-color-photo-scrim: rgba(33, 31, 27, 0.22);
  --binoki-color-detailed-scrim: rgba(33, 31, 27, 0.14);
  --binoki-color-photo-shadow: rgba(33, 31, 27, 0.08);
  --binoki-color-detailed-shadow: rgba(33, 31, 27, 0.1);
  --binoki-color-plain-shadow: rgba(33, 31, 27, 0.04);
  --binoki-color-selected-photo: rgba(255, 255, 255, 0.12549);
  --binoki-color-selected-plain: rgba(216, 32, 0, 0.0627451);
  --binoki-color-opaque-photo: rgba(81, 78, 73, 1);
  --binoki-number-0: 0;
  --binoki-number-1: 1;
  --binoki-number-2: 2;
  --binoki-number-3: 3;
  --binoki-number-4: 4;
  --binoki-number-8: 8;
  --binoki-number-10: 10;
  --binoki-number-12: 12;
  --binoki-number-14: 14;
  --binoki-number-16: 16;
  --binoki-number-18: 18;
  --binoki-number-20: 20;
  --binoki-number-24: 24;
  --binoki-number-28: 28;
  --binoki-number-32: 32;
  --binoki-number-44: 44;
  --binoki-number-48: 48;
  --binoki-number-64: 64;
  --binoki-number-320: 320;
  --binoki-number-400: 400;
  --binoki-number-500: 500;
  --binoki-number-600: 600;
  --binoki-font-latin: "Inter";
  --binoki-font-tc: "Noto Sans TC";
  --binoki-number-56: 56;
  --binoki-number-40: 40;
  --binoki-number-1-3333333333333333: 1.3333333730697632;
  --binoki-number-1-6666666666666667: 1.6666666269302368;
  --binoki-number-36: 36;
  --binoki-number-5: 5;
  --surface: var(--binoki-color-photo-surface);
  --edge: var(--binoki-color-photo-edge);
  --fg: var(--binoki-color-white);
  --scrim: var(--binoki-color-photo-scrim);
  --binoki-material-shadow-color: var(--binoki-color-photo-shadow);
  --binoki-material-selected: var(--binoki-color-selected-photo);
  --binoki-material-fallback: var(--binoki-color-opaque-photo);
  --blur: calc(var(--binoki-number-16) * 1px);
  --binoki-material-shadow-y: calc(var(--binoki-number-2) * 1px);
  --binoki-material-shadow-radius: calc(var(--binoki-number-8) * 1px);
  --binoki-spacing-0: calc(var(--binoki-number-0) * 1px);
  --binoki-spacing-4: calc(var(--binoki-number-4) * 1px);
  --binoki-spacing-8: calc(var(--binoki-number-8) * 1px);
  --binoki-spacing-10: calc(var(--binoki-number-10) * 1px);
  --binoki-spacing-12: calc(var(--binoki-number-12) * 1px);
  --binoki-spacing-16: calc(var(--binoki-number-16) * 1px);
  --binoki-spacing-20: calc(var(--binoki-number-20) * 1px);
  --binoki-spacing-24: calc(var(--binoki-number-24) * 1px);
  --binoki-spacing-32: calc(var(--binoki-number-32) * 1px);
  --binoki-spacing-48: calc(var(--binoki-number-48) * 1px);
  --binoki-spacing-64: calc(var(--binoki-number-64) * 1px);
  --radius: calc(var(--binoki-number-24) * 1px);
  --binoki-radius-control: calc(var(--binoki-number-12) * 1px);
  --binoki-radius-action: calc(var(--binoki-number-4) * 1px);
  --binoki-size-card-max: calc(var(--binoki-number-320) * 1px);
  --binoki-size-touch-min: calc(var(--binoki-number-44) * 1px);
  --binoki-border-hairline: calc(var(--binoki-number-1) * 1px);
  --binoki-focus-width: calc(var(--binoki-number-2) * 1px);
  --binoki-focus-offset: calc(var(--binoki-number-4) * 1px);
  --binoki-size-icon-small: calc(var(--binoki-number-16) * 1px);
  --binoki-size-icon-medium: calc(var(--binoki-number-20) * 1px);
  --binoki-size-icon-large: calc(var(--binoki-number-24) * 1px);
  --binoki-border-icon-small: calc(var(--binoki-number-1-3333333333333333) * 1px);
  --binoki-border-icon-medium: calc(var(--binoki-number-1-6666666666666667) * 1px);
  --binoki-border-icon-large: calc(var(--binoki-number-2) * 1px);
  --binoki-size-card-top-row: calc(var(--binoki-number-28) * 1px);
  --binoki-size-bookmark-slot: calc(var(--binoki-number-36) * 1px);
  --binoki-size-focus-control: calc(var(--binoki-number-56) * 1px);
  --binoki-radius-focus-control: calc(var(--binoki-number-18) * 1px);
  --binoki-radius-focus-action: calc(var(--binoki-number-10) * 1px);
  --binoki-radius-none: calc(var(--binoki-number-0) * 1px);
  --binoki-radius-component-set: calc(var(--binoki-number-5) * 1px);
  --binoki-size-title: calc(var(--binoki-number-20) * 1px);
  --binoki-size-body: calc(var(--binoki-number-14) * 1px);
  --binoki-line-title: calc(var(--binoki-number-28) * 1px);
  --binoki-line-body: calc(var(--binoki-number-24) * 1px);
  --binoki-weight-regular: var(--binoki-number-400);
  --binoki-weight-medium: var(--binoki-number-500);
  --binoki-weight-semibold: var(--binoki-number-600);
  --binoki-family-latin: var(--binoki-font-latin);
  --binoki-family-tc: var(--binoki-font-tc);
  --binoki-size-display: calc(var(--binoki-number-48) * 1px);
  --binoki-line-display: calc(var(--binoki-number-56) * 1px);
  --binoki-size-heading: calc(var(--binoki-number-32) * 1px);
  --binoki-line-heading: calc(var(--binoki-number-40) * 1px);
  --binoki-size-meta: calc(var(--binoki-number-12) * 1px);
  --binoki-line-meta: calc(var(--binoki-number-20) * 1px);
  --binoki-tracking-default: calc(var(--binoki-number-0) * 1px);
  --binoki-brand-red: var(--binoki-color-red);
  --binoki-brand-paper: var(--binoki-color-paper);
  --binoki-brand-ink: var(--binoki-color-ink);
  --binoki-brand-black: var(--binoki-color-black);
  --binoki-brand-white: var(--binoki-color-white);
  --binoki-brand-transparent: var(--binoki-color-transparent);
  --binoki-icon-size: var(--binoki-size-icon-large);
  --binoki-icon-stroke: var(--binoki-border-icon-large);
}
[data-binoki-material="photo"] {
  --surface: var(--binoki-color-photo-surface);
  --edge: var(--binoki-color-photo-edge);
  --fg: var(--binoki-color-white);
  --scrim: var(--binoki-color-photo-scrim);
  --binoki-material-shadow-color: var(--binoki-color-photo-shadow);
  --binoki-material-selected: var(--binoki-color-selected-photo);
  --binoki-material-fallback: var(--binoki-color-opaque-photo);
  --blur: calc(var(--binoki-number-16) * 1px);
  --binoki-material-shadow-y: calc(var(--binoki-number-2) * 1px);
  --binoki-material-shadow-radius: calc(var(--binoki-number-8) * 1px);
}
[data-binoki-material="detailed"] {
  --surface: var(--binoki-color-detailed-surface);
  --edge: var(--binoki-color-detailed-edge);
  --fg: var(--binoki-color-white);
  --scrim: var(--binoki-color-detailed-scrim);
  --binoki-material-shadow-color: var(--binoki-color-detailed-shadow);
  --binoki-material-selected: var(--binoki-color-selected-photo);
  --binoki-material-fallback: var(--binoki-color-opaque-photo);
  --blur: calc(var(--binoki-number-28) * 1px);
  --binoki-material-shadow-y: calc(var(--binoki-number-2) * 1px);
  --binoki-material-shadow-radius: calc(var(--binoki-number-8) * 1px);
}
[data-binoki-material="plain"] {
  --surface: var(--binoki-color-plain-surface);
  --edge: var(--binoki-color-plain-edge);
  --fg: var(--binoki-color-ink);
  --scrim: var(--binoki-color-transparent);
  --binoki-material-shadow-color: var(--binoki-color-plain-shadow);
  --binoki-material-selected: var(--binoki-color-selected-plain);
  --binoki-material-fallback: var(--binoki-color-white);
  --blur: calc(var(--binoki-number-0) * 1px);
  --binoki-material-shadow-y: calc(var(--binoki-number-1) * 1px);
  --binoki-material-shadow-radius: calc(var(--binoki-number-3) * 1px);
}
[data-binoki-icon-size="large"] {
  --binoki-icon-size: var(--binoki-size-icon-large);
  --binoki-icon-stroke: var(--binoki-border-icon-large);
}
[data-binoki-icon-size="medium"] {
  --binoki-icon-size: var(--binoki-size-icon-medium);
  --binoki-icon-stroke: var(--binoki-border-icon-medium);
}
[data-binoki-icon-size="small"] {
  --binoki-icon-size: var(--binoki-size-icon-small);
  --binoki-icon-stroke: var(--binoki-border-icon-small);
}