Pq234/robot-learning-tutorial

1/* ============================================================================ */2/* Design Tokens */3/* ============================================================================ */4:root {5  /* Neutrals */6  --neutral-600: rgb(107, 114, 128);7  --neutral-400: rgb(185, 185, 185);8  --neutral-300: rgb(228, 228, 228);9  --neutral-200: rgb(245, 245, 245);10 11  --default-font-family: Source Sans Pro, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";12 13  /* Brand (OKLCH base + derived states) */14  --primary-base: oklch(0.75 0.12 47);15  --primary-color: var(--primary-base);16  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);17  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);18  --on-primary: #ffffff;19 20  /* Text & Surfaces */21  --page-bg: #ffffff;22  --text-color: rgba(0, 0, 0, .85);23  --transparent-page-contrast: rgba(255, 255, 255, .85);24  --muted-color: rgba(0, 0, 0, .6);25  --border-color: rgba(0, 0, 0, .1);26  --surface-bg: #fafafa;27  --code-bg: #f6f8fa;28 29  /* Links */30  --link-underline: var(--primary-color);31  --link-underline-hover: var(--primary-color-hover);32 33  /* Spacing scale */34  --spacing-1: 8px;35  --spacing-2: 12px;36  --spacing-3: 16px;37  --spacing-4: 24px;38  --spacing-5: 32px;39  --spacing-6: 40px;40  --spacing-7: 48px;41  --spacing-8: 56px;42  --spacing-9: 64px;43  --spacing-10: 72px;44 45  /* Custom Media aliases compiled by PostCSS */46  @custom-media --bp-xxs (max-width: 320px);47  @custom-media --bp-xs (max-width: 480px);48  @custom-media --bp-sm (max-width: 640px);49  @custom-media --bp-md (max-width: 768px);50  @custom-media --bp-lg (max-width: 1024px);51  @custom-media --bp-xl (max-width: 1280px);52  @custom-media --bp-content-collapse (max-width: 1100px);53 54  /* Layout */55  --content-padding-x: 16px;56  /* default page gutter */57  --block-spacing-y: var(--spacing-4);58  /* default vertical spacing between block components */59 60  /* Config */61  --palette-count: 8;62 63  /* Button tokens */64  --button-radius: 6px;65  --button-padding-x: 16px;66  --button-padding-y: 10px;67  --button-font-size: 14px;68  --button-icon-padding: 8px;69  /* Big button */70  --button-big-padding-x: 16px;71  --button-big-padding-y: 12px;72  --button-big-font-size: 16px;73  --button-big-icon-padding: 12px;74 75  /* Table tokens */76  --table-border-radius: 8px;77  --table-header-bg: oklch(from var(--surface-bg) calc(l - 0.02) c h);78  --table-row-odd-bg: oklch(from var(--surface-bg) calc(l - 0.01) c h);79 80  /* Z-index */81  --z-base: 0;82  --z-content: 1;83  --z-elevated: 10;84  --z-overlay: 1000;85  --z-modal: 1100;86  --z-tooltip: 1200;87 88  /* Charts (global) */89  --axis-color: var(--muted-color);90  --tick-color: var(--text-color);91  --grid-color: rgba(0, 0, 0, .08);92}93 94/* ============================================================================ */95/* Dark Theme Overrides */96/* ============================================================================ */97[data-theme="dark"] {98  --page-bg: #0f1115;99  --text-color: rgba(255, 255, 255, .9);100  --muted-color: rgba(255, 255, 255, .7);101  --border-color: rgba(255, 255, 255, .15);102  --surface-bg: #12151b;103  --code-bg: #12151b;104  --transparent-page-contrast: rgba(0, 0, 0, .85);105 106  /* Charts (global) */107  --axis-color: var(--muted-color);108  --tick-color: var(--muted-color);109  --grid-color: rgba(255, 255, 255, .10);110 111  /* Primary (lower L in dark) */112  --primary-color-hover: oklch(from var(--primary-color) calc(l - 0.05) c h);113  --primary-color-active: oklch(from var(--primary-color) calc(l - 0.10) c h);114  --on-primary: #0f1115;115 116  color-scheme: dark;117  background: var(--page-bg);118}