/* Somers Design System — generated by scripts/sync-shared.sh. Do not edit. */ /* Source: shared/design-system/{colors.css,typography.css,spacing.css,effects.css,base.css,components.css} */ /* ===== colors.css ===== */ :root{ /* Neutrals — warm, paper-like. Never pure black. */ --ink-900:#1E1F1A;--ink-700:#40423A;--ink-500:#6E7066;--ink-300:#B8B7AD;--ink-200:#D9D7CF;--ink-100:#ECEAE3; --paper-50:#FBF9F4;--paper-100:#F4F0E8;--white:#FFFFFF; /* Greens — the core. Forest for professional, leaf for personal. */ --green-900:#22371F;--green-800:#2F4A2E;--green-700:#3F5E3C;--green-600:#4F7247;--green-500:#5F7D4A;--green-400:#7C9A63;--green-200:#C9D6B8;--green-100:#E6ECDF;--green-50:#F2F5EC; --leaf-600:#3E7A32;--leaf-500:#4F8A3C;--leaf-400:#6FA65A;--leaf-100:#DDEED3; /* Warm accents — bow-tie marigold, brick, terracotta */ --marigold-600:#D99A12;--marigold-500:#F2B41E;--marigold-400:#F7C64B;--marigold-100:#FBEFC8; --brass-500:#B8962E;--brass-100:#EFE6C6; --brick-600:#8E4E33;--brick-500:#A8563A;--brick-100:#F0DDD3; --terracotta-500:#D9663D;--terracotta-400:#E6825E;--terracotta-100:#F8DFD3; /* Cool supports — navy from the dress, robin's-egg from the sky */ --navy-800:#1F2B4A;--navy-700:#2B3A60;--navy-100:#DCE1EC; --robin-500:#6FB3C9;--robin-400:#8FC5D6;--robin-100:#DFF0F5; /* Semantic — Professional mode (default). Muted, forest-and-stone. */ --color-primary:var(--green-800);--color-primary-hover:var(--green-900);--color-primary-soft:var(--green-100); --color-accent:var(--brass-500);--color-accent-soft:var(--brass-100); --color-secondary:var(--navy-800);--color-secondary-soft:var(--navy-100); --color-warm:var(--brick-500);--color-warm-soft:var(--brick-100); --color-cool:var(--navy-700);--color-cool-soft:var(--navy-100); --text-heading:var(--green-900);--text-body:var(--ink-900);--text-muted:var(--ink-500);--text-on-primary:var(--paper-50);--text-link:var(--green-700);--text-link-hover:var(--green-900); --surface-page:var(--paper-50);--surface-card:var(--white);--surface-raised:var(--paper-100);--surface-tint:var(--green-50);--surface-inverse:var(--green-900); --border-subtle:var(--ink-200);--border-strong:var(--ink-300);--border-focus:var(--green-600); /* Status */ --status-success:var(--green-600);--status-success-soft:var(--green-100); --status-warning:var(--marigold-600);--status-warning-soft:var(--marigold-100); --status-danger:var(--brick-500);--status-danger-soft:var(--brick-100); --status-info:var(--navy-700);--status-info-soft:var(--navy-100); } /* Personal mode — brighter garden palette. Set data-mode="personal" on , , or any container. */ [data-mode="personal"]{ --color-primary:var(--leaf-500);--color-primary-hover:var(--leaf-600);--color-primary-soft:var(--leaf-100); --color-accent:var(--marigold-500);--color-accent-soft:var(--marigold-100); --color-secondary:var(--navy-700);--color-secondary-soft:var(--navy-100); --color-warm:var(--terracotta-500);--color-warm-soft:var(--terracotta-100); --color-cool:var(--robin-500);--color-cool-soft:var(--robin-100); --text-heading:var(--green-800);--text-link:var(--leaf-600);--text-link-hover:var(--green-800); --surface-page:var(--white);--surface-raised:var(--paper-50);--surface-tint:var(--leaf-100);--surface-inverse:var(--green-800); --border-focus:var(--leaf-500); --status-success:var(--leaf-500);--status-success-soft:var(--leaf-100); --status-warning:var(--marigold-500);--status-danger:var(--terracotta-500);--status-danger-soft:var(--terracotta-100);--status-info:var(--robin-500);--status-info-soft:var(--robin-100); } /* ===== typography.css ===== */ :root{ /* Lora carries warmth + authority; Nunito Sans carries approachability. Fallback stacks are chosen so the pairing survives Word, Pages, Outlook and Gmail: Georgia/Palatino for Lora, Calibri/Avenir/Helvetica for Nunito Sans. */ --font-serif:"Lora",Georgia,"Palatino Linotype","Book Antiqua",serif; --font-sans:"Nunito Sans","Avenir Next",Avenir,Calibri,"Helvetica Neue",Arial,sans-serif; --font-mono:"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --font-display:var(--font-serif);--font-body:var(--font-sans); /* Scale — 1.25 ratio from 16px */ --text-xs:0.75rem;--text-sm:0.875rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:1.5625rem;--text-2xl:1.953rem;--text-3xl:2.441rem;--text-4xl:3.052rem; --leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.55;--leading-loose:1.7; --tracking-tight:-0.01em;--tracking-normal:0;--tracking-wide:0.06em;--tracking-caps:0.12em; --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700; /* Print (Word / Pages) equivalents */ --print-body-size:11pt;--print-heading-size:16pt;--print-title-size:24pt; } /* ===== spacing.css ===== */ :root{ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px; --measure:64ch;--measure-narrow:44ch; --page-margin:var(--space-6);--page-max:1120px; --print-margin:1in; } /* ===== effects.css ===== */ :root{ /* Soft radii: stationery-like, never pill-shaped except tags */ --radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-pill:999px; --border-width:1px;--rule-width:2px; /* Shadows are warm-tinted (green-black), low and diffuse */ --shadow-sm:0 1px 2px rgba(34,55,31,.08); --shadow-md:0 4px 14px rgba(34,55,31,.10),0 1px 3px rgba(34,55,31,.06); --shadow-lg:0 16px 40px rgba(34,55,31,.14),0 2px 6px rgba(34,55,31,.06); --focus-ring:0 0 0 3px color-mix(in oklch,var(--border-focus) 35%,transparent); --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms; --opacity-hover:.85; --opacity-disabled:.45; } /* ===== base.css ===== */ /* Minimal element defaults so plain HTML documents inherit the brand. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font-body);font-size:var(--text-md);line-height:var(--leading-normal);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);font-weight:var(--weight-medium);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);margin:0 0 var(--space-3);text-wrap:balance} h1{font-size:var(--text-3xl)}h2{font-size:var(--text-2xl)}h3{font-size:var(--text-xl)}h4{font-size:var(--text-lg)} p{margin:0 0 var(--space-4);text-wrap:pretty} a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em;transition:color var(--dur-fast) var(--ease-out)} a:hover{color:var(--text-link-hover)} small{font-size:var(--text-sm);color:var(--text-muted)} hr{border:0;border-top:var(--rule-width) solid var(--color-primary);margin:var(--space-5) 0;width:var(--space-7)} img,svg{max-width:100%;height:auto;display:block} ::selection{background:var(--color-accent-soft)} :focus-visible{outline:none;box-shadow:var(--focus-ring)} .eyebrow{font-family:var(--font-body);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--color-primary)} /* --- Additions for static pages (not in the Claude Design export) --- */ /* A component's `display` rule must never beat the hidden attribute. */ [hidden]{display:none!important} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} } /* ===== components.css ===== */ /* Vanilla-CSS ports of the core components from the Claude Design export. The originals (components/core/*.jsx) are React with inline styles; these are the same values expressed as classes so a static page can use them. Keep them in step with the export. */ /* --- Button (components/core/Button.jsx) --------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; height:40px;padding:0 16px; font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600; line-height:1;letter-spacing:.01em;white-space:nowrap; border:1px solid transparent;border-radius:var(--radius-md); cursor:pointer; transition:background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); } .btn:active{transform:translateY(1px)} .btn[disabled]{cursor:not-allowed;opacity:var(--opacity-disabled);transform:none} .btn--sm{height:32px;padding:0 12px;font-size:var(--text-sm)} .btn--lg{height:48px;padding:0 22px;font-size:var(--text-md)} .btn--block{width:100%} .btn--primary{background:var(--color-primary);color:var(--text-on-primary)} .btn--primary:hover:not([disabled]){background:var(--color-primary-hover)} .btn--secondary{background:transparent;color:var(--color-primary);border-color:var(--color-primary)} .btn--secondary:hover:not([disabled]){background:var(--color-primary-soft)} .btn--accent{background:var(--color-accent);color:var(--ink-900)} .btn--accent:hover:not([disabled]){filter:brightness(.95)} .btn--ghost{background:transparent;color:var(--text-body)} .btn--ghost:hover:not([disabled]){background:var(--surface-raised)} .btn--danger{background:var(--status-danger);color:var(--paper-50)} .btn--danger:hover:not([disabled]){background:var(--brick-600)} /* --- Input (components/core/Input.jsx) ----------------------------------- */ .field{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans)} .field > label,.field__label{font-size:var(--text-sm);font-weight:600;color:var(--text-body)} .field__opt{font-weight:400;color:var(--text-muted)} .field input, .field textarea{ width:100%;font:inherit;font-size:var(--text-md);font-weight:400;color:var(--text-body); background:var(--surface-card); border:1px solid var(--border-strong);border-radius:var(--radius-md); transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); } .field input{height:44px;padding:0 12px} .field textarea{padding:12px;min-height:7rem;resize:vertical;line-height:var(--leading-normal)} .field input:focus, .field textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:var(--focus-ring)} .field input:disabled, .field textarea:disabled{background:var(--surface-raised)} .field__hint{font-size:var(--text-xs);color:var(--text-muted)} .field__error{font-size:var(--text-xs);color:var(--status-danger)} /* --- Dialog (components/core/Dialog.jsx) --------------------------------- */ .dialog{ position:fixed;inset:0;z-index:50; background:rgba(30,31,26,.45); display:grid;place-items:center;padding:24px;overflow-y:auto; } .dialog__panel{ width:480px;max-width:100%; background:var(--surface-card); border-radius:var(--radius-lg);box-shadow:var(--shadow-lg); padding:28px;font-family:var(--font-sans); display:flex;flex-direction:column;gap:12px; text-align:left; } .dialog__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .dialog__title{ margin:0;font-family:var(--font-serif);font-weight:var(--weight-medium); font-size:var(--text-xl);color:var(--text-heading);line-height:var(--leading-tight); } .dialog__close{ all:unset;cursor:pointer;font-size:20px;line-height:1;color:var(--text-muted);padding:4px; } .dialog__close:hover{color:var(--text-body)} .dialog__body{font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--ink-700)} .dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px;flex-wrap:wrap} /* --- Card (components/core/Card.jsx) ------------------------------------- */ .card{ background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-sm); }