/* norcane design tokens · brand.norcane.cloud Light set on :root, dark set under prefers-color-scheme. Neutrals share the brand hue (OKLCH 260°). Every text colour reaches 4.5:1 on its surface. */ :root { --paper: #F4F6FC; --paper-2: #FFFFFF; --paper-3: #E8EFF9; --line: #C8D6EE; --line-soft: #DBE5F4; --ink: #081C3F; --ink-2: #314E7C; --ink-3: #62709A; --night: #071630; --blue: #0D47A1; --blue-2: #2F6BD1; --blue-tint: #DBE7FA; --mark: #0D47A1; --wm: #0D47A1; /* small brand elements and the mark/wordmark on this surface */ --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%230D47A1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gold: #D9A62E; --gold-soft: #F1C862; --gold-text: #916900; --good: #0D814C; --warn: #BA5217; --crit: #C72E38; --none: #637092; --angle: -15deg; /* rotation of the square, counter-clockwise */ --skew: 15deg; /* skew of bars and panels, sides parallel to the square's */ --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --radius: 10px; } /* Three theme states: nothing stamped = follow the system; data-theme="light" or "dark" on wins. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #071630; --paper-2: #0A2045; --paper-3: #0F2A56; --line: #203F73; --line-soft: #173362; --ink: #EDF2FB; --ink-2: #B2C5E3; --ink-3: #758EB8; --blue-2: #4A83E3; --blue-tint: #13408A; --mark: #4A83E3; --wm: #EDF2FB; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A83E3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gold-text: #F1C862; --good: #3FBF7F; --warn: #F58550; --crit: #F0555E; --none: #8794B3; } } :root[data-theme="dark"] { --paper: #071630; --paper-2: #0A2045; --paper-3: #0F2A56; --line: #203F73; --line-soft: #173362; --ink: #EDF2FB; --ink-2: #B2C5E3; --ink-3: #758EB8; --blue-2: #4A83E3; --blue-tint: #13408A; --mark: #4A83E3; --wm: #EDF2FB; --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A83E3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --gold-text: #F1C862; --good: #3FBF7F; --warn: #F58550; --crit: #F0555E; --none: #8794B3; } /* The motif */ /* Never below 10 px: smaller than that the 15° reads as misregistration, not as a choice. */ .sq { display: inline-block; width: 10px; height: 10px; background: var(--mark); transform: rotate(var(--angle)); } .frame { clip-path: polygon(2.3% 22.3%, 76.2% 2.3%, 97.7% 77.7%, 23.8% 97.7%); } .meter { transform: skewX(var(--skew)); } .tip { transform: skewX(var(--skew)); } .tip > span { display: block; transform: skewX(calc(-1 * var(--skew))); } /* Form controls: native elements, the square instead of the browser default. */ .field input, .field select, .field textarea { width: 100%; padding: 8px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); font: inherit; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--blue-2); } .field.invalid input { border-color: var(--crit); } .field select { appearance: none; padding-right: 34px; background: var(--paper-2) var(--select-arrow) no-repeat right 12px center; } .check input { appearance: none; margin: 0; width: 14px; height: 14px; border: 1.5px solid var(--ink-3); background: transparent; display: grid; place-items: center; } .check input:checked { background: var(--mark); border-color: var(--mark); transform: rotate(var(--angle)); } .check input[type="radio"]:checked { background: transparent; border-color: var(--mark); transform: none; } .check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; background: var(--mark); transform: rotate(var(--angle)); } .check input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .toggle .track { position: relative; width: 40px; height: 20px; border-radius: 4px; background: var(--paper-3); border: 1px solid var(--line); } .toggle .track i { position: absolute; left: 3px; top: 0; bottom: 0; margin: auto 0; width: 12px; height: 12px; background: var(--ink-3); } .toggle input:checked + .track { background: var(--mark); border-color: var(--mark); } .toggle input:checked + .track i { left: 23px; background: #fff; transform: rotate(var(--angle)); } @media (prefers-reduced-motion: no-preference) { .toggle .track i, .check input { transition: transform .18s ease, left .18s ease, background-color .18s ease; } } .toggle input:focus-visible + .track { outline: 2px solid var(--gold); outline-offset: 2px; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } .btn.primary { background: var(--gold); color: var(--night); } .btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn.danger { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }