:root {
    /* Colours
    ----------------------------------------- */

    /* Pseudo-elements */
    
    --color-marker: #0066cc;
    
    --color-placeholder: color-mix(in hsl, currentColor, transparent 75%);
   
    --color-selection-bg: #f9f9f9;
    --color-selection-text: #333;
    
    --color-target-bg: #f9f9f9;
    --color-target-text: #333;

    /* Root */
    --color-accent: #0066cc;
    --color-accent-subdued: color-mix(in oklch, var(--color-accent), transparent 50%);


    --color-caret: var(--color-accent);
    --color-scrollbar-thumb: #d1d1d1;
    --color-scrollbar-track: #f1f1f1;
    
    /* Body */
    --color-global-bg: #fff;
    --color-global-text: #333;
    --min-canvas-size: 20rem; /* 320px */


    /* Root Element:
    ----------------------------------------- */
    --color-text: #333;
    --color-text-subdued: #4a4a4a;

    --color-text-link: var(--color-accent);
    --color-text-link-hover: var(--color-accent);

    --color-mark-bg: #ff0;
    --color-mark-text: inherit;

    --color-text-negative:#ff0000;

    --color-text-positive:#008000;
    --color-text-positive-subdued: color-mix(in oklch, var(--color-text-positive), transparent 80%);


    /* --color-text-subdued: #4a4a4a;
    --color-text-link-strong: var(--color-accent);
    --color-background: #fff; */


  
    /* Typography:
    ----------------------------------------- */
    /* Font Families */
    --font-global: system-ui, sans-serif;
    --font-heading: system-ui,sans-serif;
    --font-mono: ui-monospace, monospace;

    /* --font-statement:;
    --font-display:; */

    /* Font Size */
    --font-size-300: 0.75rem;

    --font-size: 1rem; /* Default */
    --font-size-450: 1.125rem; /* 18 */
    --font-size-500: 1.25rem; /* 20 */

    /* Font-size Clamp Sizes */
    --font-size-h1: clamp(2.5rem, 5vw, 3.5rem);
    --font-size-h2: clamp(2rem, 4vw, 2.5rem);
    --font-size-h3: clamp(1.75rem, 3vw, 2rem);
    --font-size-h4: clamp(1.5rem, 2.5vw, 1.75rem);
    --font-size-h5: clamp(1.25rem, 2vw, 1.5rem);
    --font-size-h6: clamp(1rem, 1.5vw, 1.25rem);

    /* Font Weights */
    --font-weight: 400; /* Default */
    --font-weight-heading: 600;
    --font-weight-strong: 600;

    /* --font-weight-medium: 500; */

    /* Letter Spacing */
    --letter-spacing: normal; /* Default */
    --letter-spacing-heading: -0.015em;

    /* Line Heights */
    --line-height: 1.5; /* Default */
    --line-height-heading: 1.1;
    /* --line-height-compact: 1.25; */

    /* Max Characters per line
    ----------------------------------------- */
    --measure: 65ch;  /* Default */
    --measure-heading-1: 30ch;
    --measure-heading-2: 45ch;

    /* --max-chars-xs: 20ch;
    --max-chars-s: 35ch;
    --max-chars-m: 45ch;
    --max-chars-l: 75ch; */

  
    /* Text Sizes */
    --text-size-meta: 0.75em;



    
    
    /* Radius
    ----------------------------------------- */
    --radius-2: .0.25rem;

    /* Stroke
    ----------------------------------------- */
    --stroke-blockquote: 0.25rem;
    

    /* Misc
    ----------------------------------------- */
    --figure-margin: 0;
    
    
    /* Spacing
    ----------------------------------------- */
    --spacing-list: 2rem; /* ul/ol*/


    --spacing-100: 0.25rem; /* 4 */
    --spacing-200: 0.5rem; /* 8 */
    --spacing-400: 1rem; /* 16 */
    --spacing-500: 1.5rem; /* 24 */
    --spacing-700: 2.5rem; /* 40 */
}