:root {
    /* NOTE: These variables can be overwritten by wrappers. */
    --safe-area-inset-top:    env(safe-area-inset-top, 0px);
    --safe-area-inset-right:  env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left:   env(safe-area-inset-left, 0px);

    /* Colors - Replace with Oklch vlaues*/
    --wf-red-300: #FDCACF; /* redLight */
    --wf-red-500: #F74E5D; /* red */
    --wf-red-700: #DE4854; /* redDark */
    --wf-red-800: #cd5c5c; /* redDarkest */

    /* Blue - Consolidate blue and dark blue using 'New blue' */
    --wf-blue-200: #C1E1F2; /* sharing */
    --wf-blue-300: #49BAF2; /* accent */
    --wf-blue-400: #4BADDF;
    --wf-blue-500: #3A97C5;
    --wf-dark-blue-100: #006699;
    --wf-dark-blue-300: #336677; /* sharing, accent */
    --wf-dark-blue-400: #3c88af; /* New accent color */
    --wf-dark-blue-500: #18475F;

    /* 'New blue' colour ramp
    --wf-blue-100: #EDF8FE;
    --wf-blue-200: #d9eefc;
    --wf-blue-300: #b1dcf9;
    --wf-blue-400: #84cbf6;
    --wf-blue-500: #49baf2;
    --wf-blue-600: #3c88af;
    --wf-blue-700: #2d5971;
    --wf-blue-800: #1c2e39; */

    --wf-green-300: #D5F3E5; /* greenLight */
    --wf-green-500: #72D7A7; /* green */
    --wf-green-700: #6ACE9F; /* greenDark */

    --wf-yellow-100: #FFFF99;
    --wf-yellow-200: #F8C476;
    --wf-yellow-300: #DF9F2E;
    --wf-yellow-700: #7c623b;

    /* Light palette */
    --wf-gray-0: #FFFFFF;   /* gray8, white, overlay */
    --wf-gray-100: #F3F4F4; /* gray7, backgroundGray */
    --wf-gray-200: #ECEEF0; /* gray6, lineGray */
    --wf-gray-300: #DCE0E2; /* gray5, lightestGray */
    --wf-gray-400: #B7BCBF; /* gray4, lightGray */
    --wf-gray-500: #868C90; /* gray3, mediumGray */
    --wf-gray-700: #4B5155; /* gray2, darkGray */
    --wf-gray-800: #2A3135; /* gray1, darkestGray*/
    --wf-gray-900: #000000; /* gray0, black */

    /* Dark palette */
    --wf-dark-gray-100: #ffffff; /* gray1 */
    --wf-dark-gray-200: #d9dbdb; /* gray2 */
    --wf-dark-gray-300: #9ea1a2; /* gray3 */
    --wf-dark-gray-400: #7c7f81; /* gray4 */
    --wf-dark-gray-500: #5c6062; /* gray5 */
    --wf-dark-gray-600: #42484b; /* gray6 */
    --wf-dark-gray-700: #353c3f; /* gray7 */
    --wf-dark-gray-800: #2a3135; /* gray8, overlay */

    /* Hacker palette */
    --wf-lime-green-100: #00FF00; /* gray1 */
    --wf-lime-green-200: #00EE00; /* gray2 */
    --wf-lime-green-300: #009900; /* gray3, accent */
    --wf-lime-green-400: #006600; /* gray4, sharing */
    --wf-lime-green-500: #005500; /* gray5 */
    --wf-lime-green-600: #003300; /* gray6 */
    --wf-lime-green-700: #002200; /* gray7 */
    --wf-lime-green-800: #000000; /* gray8, overlay */

    /* Opaque colors (Note: These are hacks. Come up with a better solution for opacity on borders/backgrounds. */
    --wf-white-opaque-10: rgba(255,255,255,0.1);
    --wf-white-opaque-20: rgba(255,255,255,0.2);
    --wf-black-opaque-5: rgba(0,0,0,0.05);
    --wf-black-opaque-20: rgba(0,0,0,0.2);
    --wf-black-opaque-30: rgba(0,0,0,0.3);
    --wf-black-opaque-60: rgba(0,0,0,0.6);
    --wf-black-opaque-70: rgba(0,0,0,0.7);

    /* Typography */
    /* We use a modular typographic scale with a ratio of 1:1.25 (Major Second) on a base size of 16px.
       This creates visual hierarchy while maintaining consistency.
       The scale closely matches our previous random font sizes.
       https://www.modularscale.com/?16&1.25 */
    --wf-font-size-xs: 0.79rem;     /* 12.64px*/
    --wf-font-size-s: 0.889rem;     /* 14.22px */
    --wf-font-size-base: 1rem;      /* 16px */
    --wf-font-size-m: 1.266em;      /* 20.25px */
    --wf-font-size-l: 1.424rem;     /* 22.78px */
    --wf-font-size-xl: 1.602rem;    /* 25.62px */
    --wf-font-size-2xl: 1.802rem;   /* 28.83px */
    --wf-font-size-3xl: 2.027rem;   /* 32.43px */
    --wf-font-size-4xl: 2.281rem;   /* 36.49px */

    --wf-font-weight-light: 300;
    --wf-font-weight-regular: 400;
    --wf-font-weight-semibold: 600;
    --wf-font-weight-bold: 700;

    --wf-line-height-s: 1.2;
    --wf-line-height-base: 1.5;

    --wf-opacity-10: 0.1;
    --wf-opacity-20: 0.2;
    --wf-opacity-30: 0.3;
    --wf-opacity-50: 0.5;
    --wf-opacity-70: 0.7;
    --wf-opacity-100: 1;

    --wf-space-xs: 2px;
    --wf-space-s: 4px;
    --wf-space-m: 8px;
    --wf-space-ml: 12px;
    --wf-space-l: 16px;
    --wf-space-xl: 24px;
    --wf-space-2xl: 32px;
    --wf-space-3xl: 48px;
    --wf-space-4xl: 64px;
    --wf-space-5xl: 80px;
    --wf-space-6xl: 96px;

    --wf-border-width-s: 1px;
    --wf-border-width-ms: 1.5px; /* Confusing. 'sm' instead? */
    --wf-border-width-m: 2px;
    --wf-border-width-l: 4px;

    --wf-radius-xs: 2px;
    --wf-radius-s: 4px;
    --wf-radius-m: 8px;
    --wf-radius-l: 16px;
    --wf-radius-pill: 999px;
    --wf-radius-circle: 50%;

    --wf-box-shadow-m: rgba(0, 0, 0, 0.12) 0px 2px 20px;

    --wf-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    --wf-font-family-mono: 'Andale Mono', Menlo, monospace;
    --wf-font-family-brand: "Open Sans", sans-serif;

    --wf-header-height: 48px; /* #hack Used for positioning comments nav bar under the header */


    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
}