72 --color-surface-1: #ededea;

73 --color-surface-2: #e4e4e0;

74 --color-hairline: #dcdcd7;

75 --color-hairline-soft: #e6e6e1;

76 --color-ink: #1a1922; /* 16.2:1 */

77 --color-ink-muted: #55525f; /* 7.1:1 */

78 --color-accent-iris: #5b2ee5;

79 --color-accent-iris-deep: #4a23c4;

80 --color-accent-iris-bright: #6a3df5;

81 --color-link: #5b2ee5; /* 6.6:1 */

82 --color-link-hover: #4a23c4;

83 --color-focus: #5b2ee5;

84 --color-on-accent: #ffffff; /* 7.1:1 on an iris fill */

85 color-scheme: light;

86}

87

88/* Dark theme. Depth comes from lifting surfaces, not from borders. */

89:root[data-theme="dark"] {

90 --color-canvas: #0a0a0d;

91 --color-surface-1: #141318;

92 --color-surface-2: #1d1b23;

93 --color-hairline: #28252f;

94 --color-hairline-soft: #1b1921;

95 --color-ink: #f5f4f6; /* 18.0:1, off-white, to soften glare */

96 --color-ink-muted: #9b97a5; /* 6.9:1 */

97 --color-accent-iris: #5b2ee5;

98 --color-accent-iris-deep: #4a23c4;

99 --color-accent-iris-bright: #8b6bff;

100 --color-link: #8b6bff; /* 5.31:1, plain iris is only 2.79:1 on dark */

101 --color-link-hover: #a892ff;

102 --color-focus: #8b6bff;

103 --color-on-accent: #ffffff;

104 color-scheme: dark;

105}

106

107/* Follows the reader's system preference until a theme is chosen explicitly. */

108@media (prefers-color-scheme: dark) {

109 :root:not([data-theme]) {

110 --color-canvas: #0a0a0d;

111 --color-surface-1: #141318;

112 --color-surface-2: #1d1b23;

113 --color-hairline: #28252f;

114 --color-hairline-soft: #1b1921;

115 --color-ink: #f5f4f6;

116 --color-ink-muted: #9b97a5;