/* OpenClaw design proposal | Claw Sans 0.7 | Original tokens: MIT */
:root {
  --oc-canvas: #F8FAFA;
  --oc-surface: #FFFFFF;
  --oc-text: #152127;
  --oc-text-secondary: #55636B;
  --oc-action: #152127;
  --oc-on-action: #FFFFFF;
  --oc-border: #D0D8DC;
  --oc-control-border: #83969F;
  --oc-focus: #1B6489;
  --oc-brand-text: #BF0615;
  --oc-error: #B42334;
  --oc-shell: #EAF1F5;
  --oc-space-4: 4px;
  --oc-space-8: 8px;
  --oc-space-12: 12px;
  --oc-space-16: 16px;
  --oc-space-24: 24px;
  --oc-space-32: 32px;
  --oc-space-48: 48px;
  --oc-space-64: 64px;
  --oc-red: #F70515;
  --oc-ocean: #145E85;
  --oc-rose: #E5AAC8;
  --oc-target: 44px;
  --oc-radius-control: 10px;
  --oc-radius-panel: 12px;
  --oc-motion-feedback: 120ms;
  --oc-motion-local: 180ms;
  --oc-motion-surface: 240ms;
  --oc-ease: cubic-bezier(.2,.8,.2,1);
  --oc-font-heading: "Claw Sans", system-ui, sans-serif;
  --oc-font-display: "OpenClaw Display", system-ui, sans-serif;
  --oc-font-body: "Claw Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --oc-font-code: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
[data-theme="dark"], [data-appearance="dark"] {
  --oc-canvas: #111A20;
  --oc-surface: #17242C;
  --oc-text: #EDF3F5;
  --oc-text-secondary: #B0C0CA;
  --oc-action: #EDF3F5;
  --oc-on-action: #111A20;
  --oc-border: #3C505D;
  --oc-control-border: #718893;
  --oc-focus: #8BC9ED;
  --oc-brand-text: #FF96A0;
  --oc-error: #FF9DAF;
  --oc-shell: #253944;
}
@media (prefers-reduced-motion: reduce) {
  :root { --oc-motion-feedback: 0ms; --oc-motion-local: 0ms; --oc-motion-surface: 0ms; }
}

/* Textured appearance: colourless shell glass; quiet, untextured type. */
[data-theme="textured"], [data-appearance="textured"] {
  color-scheme: light;
  --oc-canvas: #E9E9E9;
  --oc-surface: #FFFFFFF2;
  --oc-text: #202020;
  --oc-text-secondary: #535353;
  --oc-action: #242424;
  --oc-on-action: #FFFFFF;
  --oc-border: #B9B9B9;
  --oc-control-border: #757575;
  --oc-focus: #454545;
  --oc-brand-text: #BF0615;
  --oc-error: #B42334;
  --oc-shell: #EDEDED;
  --oc-ocean: #484848;
  --oc-glass-blur: 18px;
  --oc-glass-saturation: 1;
  --oc-spring: cubic-bezier(.22,1.35,.42,1);
  --oc-spring-duration: 380ms;
  --oc-hover-lift: 2px;
  --oc-press-scale: .985;
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="textured"], [data-appearance="textured"] {
    --oc-spring-duration: 0ms; --oc-hover-lift: 0px; --oc-press-scale: 1;
  }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  [data-theme="textured"], [data-appearance="textured"] {
    --oc-surface: #FFFFFF; --oc-glass-blur: 0px;
  }
}

/* Claw Sans 0.6 semantic web type roles. */
:root {
  --oc-type-title: clamp(2.5rem,4.6vw,4rem);
  --oc-type-section: clamp(1.75rem,3vw,2.25rem);
  --oc-type-heading: 1.25rem;
  --oc-type-lead: 1.125rem;
  --oc-type-body: 1.0625rem;
  --oc-type-compact-title: 1rem;
  --oc-type-label: .875rem;
  --oc-type-caption: .8125rem;
  --oc-type-eyebrow: .75rem;
}
@media(max-width:767px) {
  :root { --oc-type-title:clamp(2.125rem,7.5vw,2.75rem); --oc-type-section:1.75rem; --oc-type-lead:1.0625rem; }
}